Category: Class Sessions

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

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

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

  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?
 

    
        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

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

Twilio SMS

Announcements

Design Notebooks

Lets take a few minutes to review your Design Notebooks

Teams & Projects

Based on your interests, lets organize into teams and begin to formulate project ideas.

Let’s also take a few minutes to set up our team pages on the class blog.

Twilio SMS

Log in to your Twilio account and navigate to your number configuration screen.

Let’s take another look at TwiML and run through some examples using the verb.

Example

A Twilio phonebook – Try swapping in phone numbers for friends and family members, have them text your Twilio number.

Challenges

Twilio SMS

  • Create an SMS app that parses through the  Twilio parameter, looking for a particular keyword (hint: use strpos())
  • If the sender’s message contains a particular word, send one response, otherwise send a different response

Amazon Alexa

  • If you don’t already have one, create an account on IFTTT have a look around to get a feel for it
  • Log out and then log back in using Prof. Thompson’s account
  • Navigate to the IFTTT Amazon Alexa Channel
  • Use  IFTTT to message your Twilio number using SMS
  • When you receive an SMS from Alexa, forward the message to someone you know (hint: try using the attribute of the TwiML verb)

Cordova

Assignment

Read

Project Concepts

  • Meet with your team members to iron out the specific problem your prototype will address
  • Together with your team members, craft brief a problem statement (3 sentences or so)

Design Notebooks

Project Concepts

  • Individually, create a new slide in your Design Notebook and title it “Project Concept”
  • Include a link to your team’s problem statement in your slide

Project Teams

  • Create a second slide and title it “Project Team”
  • Identify what role you would like to play on your team and write a brief paragraph outlining how you would like to approach fulfilling your role
  • List your team members and what (general) role each will be fulfilling on the team (e.g. designer, programmer, content developer, etc)

Voice Applications

  • Create a 3rd slide and label it “Voice Applications”
  • Identify three examples from the case studies or possible scenarioes you read about in the Freedom Fone User Guide that appeal to you
  • Do any of them bear similarities to your team’s project concept? Write a paragraph outlining how they do or don’t

*Submit links to your Design Notebooks in Canvas prior to next week’s class срочный займ на карту

Partner Overview Presentations

Announcements

Design Notebooks

Let’s take a few minutes to review a few of your Design Notebooks.

Twilio & TCNJ Web Account Setup

Twilio

Let’s head over to Twilio and create our accounts, it’s free.

Once you’ve created an account, go ahead and set up a new phone number, just make sure the number supports both SMS  & MMS.

Let’s take a couple of minutes to look over some of the features of your new number.

TCNJ Web Account

Take a minute to confirm that you have a functioning TCNJ web account:

Open a browser and type in the following URL:

http://www.tcnj.edu/~your_username

Does the URL resolve? If so, you’re good to go. Otherwise, follow the following instructions:

Setting up a web account on TCNJ’s servers

Your First SMS App

Create a TwiML file

  1. Open up a new file in your favorite web development text editor
  2. Navigate to https://github.com/IMM-470-03-Spring-2015/sms/blob/master/hello.xml and copy the code to your new file
  3. Save the file as hello.xml
  4. Using Filezilla or another FTP client, log in to your web account and create a folder to hold your SMS code
  5. Upload your hello.xml file to your SMS app directory

Configure Your Twilio Phone Number

  1. Navigate back to your Twilio account and click Phone Numbers->Manage
  2. Click on your phone number to bring up it’s configuration page and navigate down to the Messaging section
  3. Type in the url to your TwiML file in the Request URL field
  4. Click Save at the bottom of the page
  5. Text Your Twilio Number!
  6. What happened?

Amazon Echo Unboxing

Can you guys help me unbox the class Amazon Echo?

Let’s set it up!

Partner Presentations

Welcome Katie, Tracy & team!

Assignment

Reading

Design Notebooks

Partner Projects

  • Create a new slide in your Design Notebooks and title it Partner Projects
  • Order the projects from 1 to 3 in the order that they appeal to you
  • Write a paragraph or two detailing why your top choice appeals most to you

Interfaces

  • Create a new slide in your design notebook and title it Interfaces
  • Consider the reading from this week, the two blog posts in particular
  • Write a paragraph for each, reflecting on the basic premise of each article
  • Do you agree with each? Do your own personal experiences map to the reading?
  • Finally, did you read any of the other links? The Cordova documentation, the Alexa documentation or the Xfinity documentation?
  • Write a paragraph reflecting on why it interested you.

*submit links to your Design Notebooks in Canvas быстрые займы онлайн

Intros & Syllabus

Intros:

Let’s go around the room and introduce ourselves, our interests and expertise (will help us organize into groups).

Basic Premise of this Course:

The future is already here – it’s just not very evenly distributed. 

– William Gibson, Unofficial Father of the Cyberpunk Literature Genre

A Digital Divide

A New Design Movement

Our Challenge

In this class, we’re going to explore with emergent experiences, on appropriate devices, to leapfrog the digital divide on behalf of our partner organizations.

Syllabus:

Let’s go over the Syllabus.

Basic Tools:

Assignment:

Read

Write

  • Create a new Google Slides document on Google Drive and name it “Design Notebook”
  • Create a slide in your Design Notebook and name it “Messaging & Me” with today’s date.
  • Keeping your response to one slide, consider the articles above and reflect on how you use SMS.
  • How often do you use it? What do you use it for?
  • Based on the articles above, can you think of any ways you could use it that you haven’t yet?
  • Be sure to share your Google Presentation and post a link to it as a comment to this blog post below.

*Assignments are due before class on Friday. Be prepared to present your work in class for discussion. hairy girl