Final Regular Session

Announcements

Team Pages

Let’s take 1/2 hour or so to update our team pages.

Make sure you’ve added a Documentation section and have links to your

  • Project Implementation Documentation
  • Project Design Documentation

Also, create a new section called Final Presentation and add a link to your Google Presentation for your final presentation

Final Presentations

Let’s take and hour or so to continue refining our final presentations. We’ll run through the presentations at about 11:00.

Assignment

Final Presentations

Put the finishing touches on your presentations and practice, practice, practice.

It will feel much more natural (and comfortable to you) if you come to your final presentation having practiced it several times.

Team Pages

Be sure to update the link on your team page to the latest version of your presentation before we meet on Wed, 5/11 at 5:00pm.

Prep for Final Presentations

Announcements

Final Presentations

Let’s take a few minutes to discuss your final presentations.

What’s the purpose of your presentation?

  • As a team, you are storytellers
  • Together, your mission is to construct an engaging and convincing argument demonstrating the value of your interactive solution

To achieve this, you’ll need to work together, each team member speaking with confidence and authority about a component of your team’s solution.

Final Presentation Elements

  • What? What problem is your solution addressing?
  • Who? Who are the stakeholders?
  • How? How does your solution address the problem?
  • Why? Why did you take this approach?
  • When? When could your partner begin using your solution?

Exercise

Together with your team, review your team pages & the project deliverables you’ve generated over the course of the semester. Organize your deliverables against each of the elements listed above (i.e. User Personas & User Stories might map to the Who, the Usability Reports could map to the Why, etc).

Assignment

  • Together with your team continue organizing your deliverables from the semester against the elements listed above
  • As a team, agree amongst yourselves who will be responsible for presenting which elements
  • Individually, begin organizing how you would like to present your section
  • Next week we’ll begin constructing your presentations

Project Implementation Documentation

Announcements

Demos!

Let’s pick up where we left off last week and see where you are with your projects.

Documentation

Why document your projects?

What kinds of things should you document?

  • Equipment requirements
  • Architectural requirements
  • Software requirements
  • Accounts
  • Maintenance procedures
  • Update procedures
  • Expenses and estimated budgets
  • Others?

Exercise

Project Documentation List

For each member  on your team, take turns role playing that you are your client partner. As the client partner, imagine what you would need to know if you were to actually try to implement your team’s project. Start a list with the first role player, adding to it with each additional role player.

Draft Project Implementation Documentation

  • Create a new Google Drive document and title it Project Implementation Documentation
  • Scour over your list, looking for common themes
  • For each theme, create a heading in your document; for example, if your project requires usernames and passwords to be able to use it, include a section on user names and passwords
  • Other headings might include, hardware requirements, software requirements, maintenance requirements, marketing and promotion, etc.

Open Discussion & Project Workshop

Continue working on your projects.

Assignment

Team Pages

Together with your team, make sure your Team Page is up-to-date and includes the following artifacts:

  • Project name
  • Project description
  • Team members
  • Project flows
  • System Personas
  • Project Implementation Document
  • Any other screen shots or documentation your team has developed

Projects

  • Create a new slide in your Design Notebook and title it “Project Status for April 29”
  • Write a brief summary paragraph of your teams progress this week
  • Write a second paragraph outlining your team’s goals for next week

*Submit the link to your Design Notebook to Canvas before we meet again next week

Open Discussion

Announcements

Project Status

Let’s take a few minutes to review the status of each of your projects.

Where are you currently and where do you see your project being at the end of the semester?

Anything blocking your progress?

Open Discussion & Project Workshop

Continue working on your projects.

Demos!

Let’s see what you’ve been able to create!

Assignment

Team Pages

Together with your team, make sure your Team Page is up-to-date and includes the following artifacts:

  • Project name
  • Project description
  • Team members
  • Project flows
  • System Personas
  • Any other screen shots or documentation your team has developed

Projects

  • Create a new slide in your Design Notebook and title it “Project Status for April 22”
  • Write a brief summary paragraph of your teams progress this week
  • Write a second paragraph outlining your team’s goals for next week

*Submit the link to your Design Notebook to Canvas before we meet again next week

Project Team Pages

Announcements

Project Status

Let’s take a few minutes to review the status of each of your projects.

Where are you currently and where do you see your project being at the end of the semester?

Anything blocking your progress?

Exercise

Let’s take some time to update our team pages.

Do we need to split any projects into separate team pages?

Your team pages should contain the following sections:

  • Project name
  • Project description
  • Team members
  • Project flows
  • System Personas
  • Anything else?

Project Workshop

Continue working on your projects.

Assignment

Team Pages

Together with your team, make sure your Team Page is up-to-date and includes the following artifacts:

  • Project name
  • Project description
  • Team members
  • Project flows
  • System Personas
  • Any other screen shots or documentation your team has developed

Projects

  • Create a new slide in your Design Notebook and title it “Project Status for April 15”
  • Write a brief summary paragraph of your teams progress this week
  • Write a second paragraph outlining your team’s goals for next week

*Submit the link to your Design Notebook to Canvas before we meet again next week

Textit.in IVR

Announcements

Tay Tweets: Anthropomorphism vs Mechanomorphism

Anthropomorphism

Mechanomorphism

The Laws of Robotics

Textit.in IVR

Challenge

Textit.in

Try using a webhook in a text message flow to access content from a database based on a keyword from the user’s text message.

Amazon Dot

Get it set up and running with Healthnut & EatThisDoThat

Amazon Echo

Try the History Buff example

Cordova

Try out one of these TTS plugins – see if you can get text-to-speech working on your phone!

Assignment

Projects

  • Meet with your team virtually or in person to continue refining your projects

Reading

Bonus

Design Notebooks

Projects

  • Create a new slide in your Design Notebook and title it “Project Status for April 8”
  • Write a brief summary paragraph of your teams progress this week
  • Write a second paragraph outlining your team’s goals for next week

Microsoft’s Tay

  • Create a new slide in your Design Notebook and title it “Tay & System Personas”
  • Review your “System Persona” Design Notebook entry and read the articles listed above
  • Write a paragraph reflecting on the merits of anthropomorphism and those of mechanomorphism as they relate to your project’s system persona. What balance would best serve the community your system is being designed to serve?

*Submit the link to your Design Notebook to Canvas before we meet again next week

Textit.in SMS

Announcements

Design Notebooks

Let’s take a few minutes to review your system personas.

Textit

What is it?

Textit is a visual interactive SMS application development platform developed by Nyaruka in Rwanda.

How does it work?

Setting up

Your first Textit flow

Testing Textit flows

Additional Examples

Workshop

Let’s break up into our groups and continue working on our projects.

For projects using SMS, work through the videos listed under Additional Examples as appropriate for your project.

Assignment

Projects

  • With your team, continue working on your projects. Come to class next week prepared to demonstrate your progress.

Design Notebooks

  • Create a new slide in your Design Notebook and title it “Project Iteration 1”
  • Write a brief paragraph reflecting on your work this week on your project. What did you accomplish? Did you encounter any blocks to your progress? What do you intend to accomplish next week?

*Submit the link to your Design Notebook to Canvas before we meet again next week

Databases & APIs

Announcements

Design Notebooks

Let’s take a few minutes to review some of your Design Notebooks. In particular, what did you think of The Jack Principles and how they apply to your project?

Project Status

How are your projects going? What sort of feedback are you getting from your partners? Have you received the information you need to move forward designing your solutions?

Team Pages

Let’s take some time to update your team pages with the the user flows you developed last week as part of your assignment.

Personas

When creating conversational interfaces for SMS, IVR, or VUI-based interfaces like Alexa, Siri or Cortana, you need to design the “personality” behind the system. This personality is sometimes referred to as the system’s persona.

As persona designers, you need to choose the appropriate voice (male, female, Alice, etc), language (English, Spanish, etc) and feel (tone and writing style). The Jack Principals take about a number of guidelines for creating  believable personas:

  • Maintaining pace
  • Creating the Illusion of Awareness
  • Maintaining the Illusion of Awareness

Two important technical hurdles in addressing these principles are remembering elements of the conversation (data persistence), and having functional knowledge and authority about the subject of the conversation. From a technical perspective, we can use databases and APIs to provide data persistence and have access to specific knowledge sets.

Data & APIs

Databases

Over the last couple of weeks, whenever we need to store data for our apps, we used comma separated text files. This week we’ll have a look at PostgreSQL, “the world’s most advanced open source database”.

PostgreSQL is an object-relational database, which means it can ‘relate’ information together in the form of tables. It used a query language called SQL, or Structured Query Language, to create, update and delete data in the database.

PostgreSQL is used by thousands of organizations, including Etsy, the National Weather Service, Apple & Skype.

TCNJ PostgreSQL

As it turns out, you all have access to a PostgreSQL instance at database.tcnj.edu. Let’s log in and create our database.

For our purposes, we’ll need to do three things to database-enable our apps:

  1. Create the table for our data
  2. Insert records into our data table
  3. Retrieve data from our table

Code Examples

Head over to Github and download this week’s example files.

Phonebook

Let’s create a phone book we can use for some of the apps we developed earlier in the semester.

  • Log into the TCNJ postgreSQL database and create a new schema called phonebook.
  • Now open up the phonebook.sql file from the examples in a text editor and add in your own phone numbers.
  • Click the SQL icon in the menu along the top of phpPgAdmin and let’s feed it your updated phonebook.sql file.
  • Edit hello_mom_psql.php replacing the database and user info with your own.
  • Now upload hello_mom_psql.php onto your TCNJ web account and update your Twilio phone number message url to point to it.
  • Text your Twilio phone number from your or a friend’s cell phone. Try calling from a number that’s in your phonebook database, and from a number that is not.
  • What happened?

Let’s have a look at the code for hello_mom_psql.php.

Incident Database

Let’s update the incident reporting app we made last week to use a database instead of a file to store our data.

  • Log into the TCNJ postgreSQL database and create a new schema called incidents.
  • Now open up the incidents.sql file from the examples in a text editor and add in your own phone numbers.
  • Click the SQL icon in the menu along the top of phpPgAdmin and let’s feed it your updated incidents.sql file.
  • Now upload sms_map_psql.phpmap_incidents.php, and postgresql_map.html onto your TCNJ web account, and update your Twilio phone number message url to point to it.
  • Text your Twilio phone number from your or a friend’s cell phone, keying in a location name, and its latitude and longitude coordinates, in a comma-separated list like so: Trenton, 40.2162772, -74.7741221
  • Now, in your web browser, navigate to your postgresql_map.html map that you uploaded; e.g http://www.tcnj.edu/~username/imm470-03/databases/postgresql_map.html
  • What happened?

Let’s have a look at the code for sms_map_psql.phpmap_incidents.php, and postgresql_map.html

APIs

API stands for Application Programming Interface and refers to hooks some applications have that allow other applications to connect to them.

For example, Twitter is an application that allows users to share short status updates through a web or mobile interface. But what if you wanted to show your latest tweets on your blog? You’d need to have some way to allow your blog to communicate with Twitter, application to application, to filter, collect, and present just the appropriate tweets on your blog. Since Twitter has an API, this is a fairly straight-forward thing to do.

Let’s work through a couple of examples:

Geocoding

Yummly Recipes

We can use Yummly’s API to search for recipes.

  • Set your Twilio Messaging Request URL to http://www.mediamesis.net/twilio/yummly.php
  • Using your cellphone, text your Twilio phone number with an ingredient of some kind
  • What happened?

Let’s have a look at the code for yummly.php.

GEOCODING FOR FEATURE PHONES

For our geocoding API needs today, we’ll use the Google GeoCoder.

  • Set your Twilio Messaging Request URL to http://www.mediamesis.net/twilio/geocoder.php
  • Using your cellphone, text your Twilio phone number with address information of some sort; a zip code, a city name, a street address, etc.
  • What happened?

Let’s have a look at the code for geocoder.php.

GEOCODING FOR SMARTPHONES

Smartphones come with GPS capabilities built in. The trick is to integrate those capabilities into a sensible user interface that suits your application.

For SMS-based incident reporting, an elegant solution would be to allow users to geocode SMS messages using their phone’s GPS feature:

Cordova SMS plugin + Cordova GPS plugin = Smartphone GPS-enabled SMS client

Alternatively, you could develop a native app that posts directly to an incident database though the internet protocol (wifi or 3g /4g).

A Weather App

Let’s create an SMS app that let’s the user send an SMS with their Zip Code, City, or other address info and receive back the current weather conditions for that location.

  • Set your Twilio Messaging Request URL to http://www.mediamesis.net/twilio/current_weather.php
  • Text your Twilio number an address of some sort, a zip Code, a city name, a street address, etc.
  • What happened?

To accomplish this, we needed a couple of things:

  1. First we needed to implement a geocoder pattern to convert the address info into latitude & longitude.
  2. Then, we needed to find an API we can use to get the current weather conditions for our location.

Since we’ve got a working geocoder pattern, we went ahead and reused that to geocode user input. And since we were looking for a solution that will work reasonably well internationally, we used Forecast.io for our weather data.

Let’s have a look at the code for current_weather.php.

Challenges

Twilio

  • Break up into your teams
  • You’ll need a hosting environment other than your TCNJ web accounts for the geocoding and weather APIs to function correctly
  • Using sms_map_psql.phpmap_incidents.phppostgresql_map.html and current_weather.php as your starting place, recreate the incident mapping app to include geocoding and the weather for the location input data.
  • Initially, you had to look up the lat, lon info and input it in along with a name in a comma separated line, now you should only have to type in a zip code, city name or address for the incident to appear on the map, and for the weather report to appear in the marker window.

Cordova

Cordova (Phonegap) + Yummly tutorial

Amazon Echo

Continue working in the Amazon Alexa Skills Development Kit & the Amazon AWS Lambda Management Console to refine your trivia game.

Assignment

User Flows

  • Based on the feedback from your partners, work through any remaining user flows and post them to your team page
  • These flows are the conversational paths your systems persona is capable of following.
  • Include them in your Vision Document as well

Vision Documents

  • Get together with your group and formalize your Vision Documents based on this template
  • Add a link to your team’s vision document to your team page on the class blog

Design Notebooks

  • Create a new slide in your Design Notebooks and title it “System Persona”
  • Write a brief bullet-pointed list of personality attributes your project’s persona needs to have to be an effective interface.
  • Include a link to your team page

*Submit the link to your Design Notebook to Canvas before we meet again next week

Twilio Polls

Announcements

Project Status

Let’s take a few minutes to get caught up on the status of each of your projects. Have you created your list of questions for your partner contacts?

Surveys

Why do we use surveys and questionnaires?

Survey Guide

Types of Survey Questions

  • Closed-ended Questions
  • Open-ended Questions

Types of Survey Questions on Explorable

Online Survey Tools

Here’s an example TCNJ Qualtrics Survey

Phone Polls

  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 Phone Interview Loop

flowchart_lg

Interview Loop with <Gather>

  1. After you’ve uploaded the poll_gather.xml and respond.php files 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 ‘poll_gather.xml’.
  2. Call your Twilio number.
  3. What happened?
<!-- poll_gather.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
 <!-- ask poll question, default finish key is # -->
 <Gather action="./respond.php" method="get">
 <Say>Welcome to the 2016 Oscars phone poll.</Say>
 <Say>What film would you vote for for Best Picture?</Say>
 <Say>Press 1 for The Big Short.</Say>
 <Say>Press 2 for Bridge of Spies.</Say>
 <Say>Press 3 for Brooklyn.</Say>
 <Say>Press 4 for Mad Max Fury Road.</Say>
 <Say>Press 5 for The Martian.</Say>
 <Say>Press 6 for The Revenant.</Say>
 <Say>Press 7 for Room.</Say>
 <Say>Press 8 for Spotlight.</Say>
 <Say>Or press 9 to repeat these choices.</Say>
 </Gather>
</Response>
// respond.php
<?php
header('Content-type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8"?>';

// collect the selection number
$selection = (int) $_REQUEST['Digits'];

echo '<Response>';

switch($selection){
case 1:
echo "<Say>Thanks for your response. You chose The Big Short.</Say>";
break;

case 2:
echo "<Say>Thanks for your response. You chose Bridge of Spies.</Say>";
break;

case 3:
echo "<Say>Thanks for your response. You chose Brooklyn.</Say>";
break;

case 4:
echo "<Say>Thanks for your response. You chose Mad Max Fury Road.</Say>";
break;

case 5:
echo "<Say>Thanks for your response. You chose The Martian.</Say>";
break;

case 6:
echo "<Say>Thanks for your response. You chose The Revenant.</Say>";
break;

case 7:
echo "<Say>Thanks for your response. You chose Room.</Say>";
break;

case 8:
echo "<Say>Thanks for your response. You chose Spotlight.</Say>";
break;

case 9:
echo "<Say>O K. Redirecting back to the choices.</Say><Redirect>./poll_gather.xml</Redirect>";
break;

default:
echo "<Say>I didn't understand your selection.</Say><Redirect>./poll_gather.xml</Redirect>";
break;
}

// close out file pointer
fclose($fp);

echo '</Response>';
?>

Storing Responses to a File

  1. After you’ve uploaded the poll_gather_data.xml, record_data.php and data.txt files 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 ‘poll_gather_data.xml’.
  2. Call your Twilio number.
  3. What happened?
  4. Now point your web browser to http://www.tcnj.edu/~your-user-name/your-folder/data.txt
  5. What do you see?

*A note on file permissions – these examples write the callers’ selections to a comma-separated file (csv). You’ll need to set the file permissions on your data file to ‘read & write’ with settings 666.

<!-- poll_gather_data.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
 <!-- ask poll question, default finish key is # -->
 <Gather action="./record_data.php" method="get">
 <Say>Welcome to the 2015 Oscars phone poll.</Say>
 <Say>What film would you vote for for Best Picture?</Say>
 <Say>Press 1 for The Big Short.</Say>
 <Say>Press 2 for Bridge of Spies.</Say>
 <Say>Press 3 for Brooklyn.</Say>
 <Say>Press 4 for Mad Max Fury Road.</Say>
 <Say>Press 5 for The Martian.</Say>
 <Say>Press 6 for The Revenant.</Say>
 <Say>Press 7 for Room.</Say>
 <Say>Press 8 for Spotlight.</Say>

<Say>Or press 9 to repeat these choices.</Say> </Gather> </Response>

// record_data.php
<?php
 header('Content-type: text/xml');
 echo '<?xml version="1.0" encoding="UTF-8"?>'; 
 
 // collect the selection number
 $selection = (int) $_REQUEST['Digits'];
 // collect the caller's phone number
 $from = $_REQUEST["From"];
 // get the exact time of the response
 $t = time();
 // set the timezone
 date_default_timezone_set('America/New_York');
 // open a file ponter to write our data
 $fp = fopen("data.txt", "a");
 
 echo '<Response>';
 
 switch($selection){
 case 1:
 // write the callers phone number, selection, a timestamp of the record
 fwrite($fp, $from . ',Best Picture,The Big Short,' . date("c", $t) . "\n");
 echo "<Say>Thanks for your response. You chose The Big Short.</Say>";
 break;
 
 case 2:
 // write the callers phone number, selection, a timestamp of the record & respond
 fwrite($fp, $from . ',Best Picture,Bridge of Spies,' . date("c", $t) . "\n");
 echo "<Say>Thanks for your response. You chose Bridge of Spies.</Say>";
 break;
 
 case 3:
 // write the callers phone number, selection, a timestamp of the record
 fwrite($fp, $from . ',Best Picture,Brooklyn,' . date("c", $t) . "\n");
 echo "<Say>Thanks for your response. You chose Brooklyn.</Say>";
 break;
 
 case 4:
 // write the callers phone number, selection, a timestamp of the record & respond
 fwrite($fp, $from . ',Best Picture,Mad Max Fury Road,' . date("c", $t) . "\n");
 echo "<Say>Thanks for your response. You chose Mad Max Fury Road.</Say>";
 break;
 
 case 5:
 // write the callers phone number, selection, a timestamp of the record
 fwrite($fp, $from . ',Best Picture,The Martian,' . date("c", $t) . "\n");
 echo "<Say>Thanks for your response. You chose The Martian.</Say>";
 break;
 
 case 6:
 // write the callers phone number, selection, a timestamp of the record 
 fwrite($fp, $from . ',Best Picture,The Revenant,' . date("c", $t) . "\n");
 echo "<Say>Thanks for your response. You chose The Revenant.</Say>";
 break;
 
 case 7:
 // write the callers phone number, selection, a timestamp of the record
 fwrite($fp, $from . ',Best Picture,Room,' . date("c", $t) . "\n");
 echo "<Say>Thanks for your response. You chose Room.</Say>";
 break;
 
 case 8:
 // write the callers phone number, selection, a timestamp of the record
 fwrite($fp, $from . ',Best Picture,Spotlight,' . date("c", $t) . "\n");
 echo "<Say>Thanks for your response. You chose Spotlight.</Say>";
 break;
 
 case 9:
 echo "<Say>O K. Redirecting back to the choices.</Say><Redirect>./poll_gather_data.xml</Redirect>";
 break; 
 
 default:
 echo "<Say>I didn't understand your selection.</Say><Redirect>./poll_gather_data.xml</Redirect>";
 break;
 }
 
 // close out file pointer
 fclose($fp);
 
 echo '</Response>';
?>

Interview Loop with <Record>

  1. After you’ve uploaded the poll_record_data.xml and recording.php files 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 ‘poll_record_data.xml’.
  2. Call your Twilio number.
  3. What happened?
  4. Now point your web browser to http://www.tcnj.edu/~your-user-name/your-folder/data.txt
  5. What do you see?
<!-- poll_record_data.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
 <Say>Welcome to the 2015 Oscars Phone Poll</Say>
 <Say>What was your favorite movie last year? Record your answer at the beep. Press the pound key when you're done recording.</Say>
 <Record 
 action="http://www.tcnj.edu/~your-username/your-folder/recording.php"
 method="GET"
 maxLength="20"
 finishOnKey="#"
 />
</Response>
/* recording.php */

<?php
 header("content-type: text/xml");
 echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
 
 // collect the caller's phone number
 $from = $_REQUEST["From"];
 // get the exact time of the response
 $t = time();
 // set the timezone
 date_default_timezone_set('America/New_York');
 // open a file ponter to write our data
 $fp = fopen("data.txt", "a");
 
 // get the url to the voice recording
 $recording = $_REQUEST['RecordingUrl'];
 // get the duration of the voice recording
 $duration = $_REQUEST['RecordingDuration'];
 // write the data file
 fwrite($fp, $from . ',Favorite Movie this year,' . $recording . ',' . $duration . ',' . date("c", $t) . "\n");
?>
<Response>
 <Say>Thanks for taking our poll. Your favorite movie this year was</Say>
 <Play><?php echo $recording; ?></Play>
</Response>

An SMS Example

  1. After you’ve uploaded the sms_poll_data.php file to your TCNJ web account, log into Twilio, click into your number detail page, and edit the Messaging request url for your number to point to ‘sms_poll_data.php’.
  2. Text the word ‘poll’ to your number.
  3. What happened?
  4. Check for a text back from the system and follow the instructions.
  5. What happened this time?
  6. Now point your web browser to http://www.tcnj.edu/~your-user-name/your-folder/data.txt
  7. What do you see?
/* sms_poll_data.php */

<?php
 // we can get the number of the sender using the 'From' request value
 $from = $_REQUEST['From'];
 $msg = $_REQUEST['Body'];
 
 header("content-type: text/xml");
 echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
 // get the exact time of the response
 $t = time();
 // set the timezone
 date_default_timezone_set('America/New_York');
 // open a file ponter to write our data
 $fp = fopen("data.txt", "a");
 switch($msg){
 case "Poll":
 case "POLL":
 case "poll":
 $out = "Thanks for taking our poll! Text us back with the name of your favorite movie from last year!";
 break;
 
 default:
 // write the data file
 fwrite($fp, $from . ',sms,Favorite Movie this year,' . $msg . ',' . date("c", $t) . "\n");
 $out = "Really? Your favorite film last year was " . $msg;
 break;
 }
 
 // close out file pointer
 fclose($fp);
?>
<Response>
 <Message><?php echo $out; ?></Message>
</Response>

Challenges

Twilio

  • Break up into your groups and compare notes on your list of questions for your Partner Organization from last week’s assignment.
  • Using the Phone Poll design pattern, create a Phone Poll app that asks 3 closed-ended questions and one open-ended question.
  • Be sure to store the responses in a comma-separated (csv) file on your TCNJ web account or other hosting account.

Alexa

Using the Reindeer Games tutorial, set up your own example trivia game.

Cordova

  • Cordova SMS plugin – Install the plugin and try out the “Using the Plugin’ example.
  • Review the Cordova Plugin APIs page
  • What other plugins might you combine with an SMS interface to improve the basic SMS capabilities of your phone in a useful way?

Assignment

Reading

Design Notebooks

  • Create a new page in your Design Notebooks and title it “The Jack Principles”
  • Read The Jack Principles and write few paragraphs discussing how you might apply the three main principles for creating “interactive conversation interfaces” to your project

Projects

  • Make initial contact with your contacts
  • Arrange to meet with them to present your project concepts and to interview them using the questions you developed last week
  • Based upon the feedback from your partner contacts, begin diagraming your “interactive conversation interface” flows

*Submit the link to your Design Notebook to Canvas before we meet again next week

Twilio Voice Recordings

Announcements

Design Notebooks

Let’s take a few minutes to review your Design Notebook entries from last week.

Partner Meetings

Project Teach

Tracy Perron has provided contact info for the Nursing School students working on site at Project Teach. I’ll share that contact info with the Team Teach directly.

Columbus School

Tracy Perron has arranged for Mission Slim-possible to have direct access to the school nurse at Columbus. I’ll share her contact info with the team.

History Department

Team Infinitime should make direct contact with the history department to collect user research.

Twilio Voice Recordings

Twilio’s Text-to-Speech engine is cool, but…

  • Language limitations (even Alice supports only 26 languages/dialects)
  • Sometimes we want greater flexibility with specific voices, i.e. celebrities
  • Synthesized speech just isn’t as authentic/compelling/trusted as natural human speech

Today we’ll be using Twilio’s <Play> and <Record> TwiML verbs.

  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 Playback

Instead of using Twilio’s text-to-speech engine, let’s play back a recorded message.

  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-playback.xml’.
  2. Call your Twilio number.
  3. What happened?
<!-- basic-voice-playback.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Play>http://www.mediamesis.net/imm/3hellos2.wav</Play>
</Response>

Twilio <Play> documentation

Gathering Input

Now let’s use the <Play> verb with <Gather>.

  1. Upload matrix.xml and checkpill.php to your TCNJ web account and edit the Voice request url in the Twilio Dashboard for your number to point to your edited file.
  2. Call your Twilio number.
  3. What happened?
 <!-- matrix.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Gather action="./check_pill.php" method="get" finishOnKey="*">
        <Play>http://www.mediamesis.net/imm/redpill.mp3</Play>
        <Say>Press 1 to take the red pill.</Say>
        <Say>Press 2 to take the blue pill.</Say>
    </Gather>
</Response>
 /* checkpill.php */
<?php
$pill = $_REQUEST['Digits'];

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

if($pill == 1){ // red pill
    echo "<Response>";
    echo "<Play>http://www.mediamesis.net/imm/bluepill.mp3</Play>";
    echo "</Response>";
} else if($pill = 2) { // blue pill
    echo "<Response>";
    echo "<Play>http://www.mediamesis.net/imm/matrix66.mp3</Play>"
    echo "</Response>";
} else { // other
    echo "<Response>";
    echo "<Say>Sorry, I didn't understand your selection. Please try again.</Say>"; 
    echo "<Redirect method=\"POST\">http://yourserver/matrix.xml</Redirect>";
    echo "</Response>";
}

“Please Leave a Message…”

Now let’s try building a simple answering machine.

  1. Upload voicemail.xml and record.php to your TCNJ web account and edit the Voice request url in the Twilio Dashboard for your number to point to your edited file.
  2. Call your Twilio number.
  3. What happened?
<!-- voicemail.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
   <Say>Leave a message after the beep. Press the pound key when you're done recording.</Say>
  <Record 
      action="http://www.tcnj.edu/~thompsom/imm-470-03/voice-recordings/record.php"
      method="GET"
      maxLength="20"
      finishOnKey="#"
   />
</Response>
/* recording.php */
<?php
header("content-type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";

$recording = $_REQUEST['RecordingUrl']; 
$duration = $_REQUEST['RecordingDuration'];
?>
<Response>
 <Say>Thanks for calling. Your message was <?php echo $duration; ?> seconds long. Here's the message you left.</Say>
 <Play><?php echo $recording; ?></Play>
</Response>

Twilio <Record> Documentation

Save a voicemail to SoundCloud

Workflow for Creating Voice Menu Recordings

Basic flow

  1. Start with a flow diagram
  2. Prototype it using <Say>
  3. Create a script for the voice talent
  4. Record the messages
  5. Implement using <Play>

What about foreign languages/dialects?

Challenges

Twilio

Review the Twilio Audio Recording Best Practices.

Using Audacity or other audio recording software, create a voice menu + leave-a-message app that presents the caller with information about an upcoming IMM event (e.g. HackTCNJ) and prompts them to record a message about the event.

Create menu options for:

  • Date, time and location
  • An overview description of the event
  • A sponsor listing
  • Request the caller leave-a-message about the event

Amazon Echo

Amazon Lambda + Amazon Developer Console

TCNJ Webserver + Amazon Developer Console

Deploy the Count Example skill (uses php on TCNJ web account)

  1. Create an Amazon Developer Account
  2. Create an Amazon Alexa Skill in the Developer Console
  3. Follow the Amazon Alexa with PHP Hello World tutorial

Cordova

Deploy a demo app to a connected iPhone

Timeline.js

  • Experiment with adding Soundcloud files to a Timeline.js timeline
  • Try uploading a Twilio voice recording to Soundcloud using the save2sc.php script

Assignment

Reading

Design Notebooks

  • Create a new slide in your notebook and title it “Year of the bot”
  • Close read the The search for the killer bot article
  • Write a paragraph or two commenting on the premise of the article. What evidence have you personally experienced that confirms or refutes the primary assertion of the article.

Questions for Your Partner Organization (team)

  • Create a list of questions for your Partner Organization about their services and most pressing communication problems.
  • Create another slide in your Design Notebook, titling it “Interview Questions” and today’s date., and drop in your list of questions from above.
  • Next week, you’ll combine your questions with those from your teammates to create a master list.

*Submit the link to your Design Notebook to Canvas before we meet again next week