Month: March 2016

Announcements

• Welcome back from Spring Break
• The dot is coming!
• Usability Heuristics – error prevention
• Zidisha hiring a remote php developer
• Next week – Textit.in IVR
• April 8th, Brown Bag Lunch – The Changing Nature of Community
• Pandorabots!
• Tay Tweets

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?

• Introducing Textit

Setting up

• Signing up
• Setting up a channel
• Link your Twilio number

Your first Textit flow

• Create a contact group
• Create a new flow
• Create a trigger

Testing Textit flows

• Testing flows with the simulator

Additional Examples

• Mastering Flows
• Maternity Reminders with Textit

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

Announcements

• Vision Documents are due when we get back on March 25th
• March 25th we’ll begin working with Textit.in
• April 8th, Brown Bag Lunch – The Changing Nature of Community

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.php, map_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.php, map_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.php, map_incidents.php, postgresql_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 микрозаймы онлайн

Announcements

• NBC Builds SMS/IVR Political Confessions app using Twilio
• Two Vision APIs: Google Vision & IBM Watson’s Vision Alchemy
• Two new Amazon Alexa devices! The Amazon Dot and the Tap
• Complete an Alexa trivia game by March 31st & qualify for an Echo T-Shirt
• Next week: Data, APIs & Vision Documents

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

• Google Forms
• Survey Monkey
• TCNJ Qualtrics

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

Interview Loop with

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?

 
 
 Welcome to the 2016 Oscars phone poll.
 What film would you vote for for Best Picture?
 <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>
 Or press 9 to repeat these choices.
 

// respond.php

<?php
header('Content-type: text/xml');
echo '';

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

echo '';

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

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

case 3:
echo "Thanks for your response. You chose Brooklyn.";
break;

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

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

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

case 7:
echo "Thanks for your response. You chose Room.";
break;

case 8:
echo "Thanks for your response. You chose Spotlight.";
break;

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

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

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

echo '';
?>

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.

 
 <Gather action="./record_data.php" method="get">
 Welcome to the 2015 Oscars phone poll.
 What film would you vote for for Best Picture?
 Press 1 for The Big Short.
 Press 2 for Bridge of Spies.
 Press 3 for Brooklyn.
 Press 4 for Mad Max Fury Road.
 Press 5 for The Martian.
 Press 6 for The Revenant.
 Press 7 for Room.
 Press 8 for Spotlight.

Or press 9 to repeat these choices.

// record_data.php

<?php
 header('Content-type: text/xml');
 echo ''; 
 
 // 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 '';
 
 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 "Thanks for your response. You chose The Big Short.";
 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 "Thanks for your response. You chose Bridge of Spies.";
 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 "Thanks for your response. You chose Brooklyn.";
 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 "Thanks for your response. You chose Mad Max Fury Road.";
 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 "Thanks for your response. You chose The Martian.";
 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 "Thanks for your response. You chose The Revenant.";
 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 "Thanks for your response. You chose Room.";
 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 "Thanks for your response. You chose Spotlight.";
 break;
 
 case 9:
 echo "O K. Redirecting back to the choices../poll_gather_data.xml";
 break; 
 
 default:
 echo "I didn't understand your selection../poll_gather_data.xml";
 break;
 }
 
 // close out file pointer
 fclose($fp);
 
 echo '';
?>

Interview Loop with

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?

 Welcome to the 2015 Oscars Phone Poll
 What was your favorite movie last year? Record your answer at the beep. Press the pound key when you're done recording.
 

/* recording.php */

<?php
 header("content-type: text/xml");
 echo "\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");
?>

 Thanks for taking our poll. Your favorite movie this year was
 

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

 

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

• The Jack Principles

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