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

Leave a Reply

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