Survival Guide
Mashup
Definition
“A mashup, in web development, is a web page, or web application, that uses
content from more than one source to create a single new service displayed in a
single graphical interface.”
Examples from Champaign-Urbana
•
•
•
http://www.placeofmine.com/ ( cazoodle )
http://uiusee.com/ ( powered by http://demo.ushahidi.com/ )
http://www.library.illinois.edu/ugl/
Note
Where does the data come from? Google, Craigslist , Facebook, Pinterest, and
Twitter APIs.
APIs
Definition
“A server-side web API is a programmatic interface to a defined requestresponse message system, typically expressed in JSON or XML, which is
exposed via the web—most commonly by means of an HTTP-based web
server. Mashups are web applications which combine the use of multiple such
web APIs.”
Examples
Undergradate Library Developed Minrva
http://minrva.library.illinois.edu/api/
http://minrvaproject.org/services_blocks.php
600 APIs
https://www.mashape.com/
Book Oriented APIs
http://www.goodreads.com/api
http://openlibrary.org/dev/docs/restful_api
http://www.worldcat.org/affiliate/tools?atype=wcapi
https://developers.google.com/books/docs/getting-started#books_api_v1
Google APIs
https://developers.google.com/google-apps/calendar/v3/reference/acl#resource
https://developers.google.com/maps/
Social APIs
https://dev.twitter.com/
http://developers.facebook.com/docs/reference/api/
http://www.flickr.com/services/api/
Note
APIs are simply websites created for robots/programs. Most modern APIs are
formatted in JSON.
JSON
Definition
“JSON, or JavaScript Object Notation, is a text-based open standard designed
for human-readable data interchange. Derived from the JavaScript scripting
language, JSON is a language for representing simple data structures and
associative arrays, called objects. Despite its relationship to JavaScript, JSON is
language-independent, with parsers available for many languages.”
Example
•
http://minrva.library.illinois.edu/api/tech/list
Note
JSON can easily be digested by JavaScript because JSON is a JavaScript
object.
Same-origin Policy
Definition
“In computing, the same-origin policy is an important security concept for a
number of browser-side programming languages, such as JavaScript. The policy
permits scripts running on pages originating from the same site – a combination
of scheme, hostname, and port number – to access each other's methods and
properties with no specific restrictions, but prevents access to most methods and
properties across pages on different sites. Same-origin policy also applies to
XMLHttpRequest and to robots.txt.”
Note
Without using coding tricks to circumvent the same-origin policy, JavaScript calls
to APIs will fail.
Resources
Hardware
If you are in the college of engineering, we recommend using your web.engr.illinois.edu account: https://it.engineering.illinois.edu/user-guides/how-do-i-get-a-website
If you are interested in temporarily renting a computer, we recommend the $20
plan on Linode as one possible hosting solution:
https://www.linode.com/
If you do not have a web.engr.illinois.edu account and prefer not spending
money, we recommend using your laptop as a development machine.
Programming Environment
All programming environments are welcome, but we recommend MySQL, Apache, and PHP for rapid development. Mac Tutorial: http://www.coolestguidesontheplanet.com/how-­‐to-­‐install-­‐php-­‐mysql-­‐apache-­‐on-­‐
os-­‐x-­‐10-­‐6/?utm_source=dlvr.it&utm_medium=feed Windows Tutorial: http://www.wampserver.com/en/ Ubuntu Tutorial: https://help.ubuntu.com/community/ApacheMySQLPHP Useful Web Design Tools
Design
http://getbootstrap.com/2.3.2/
Coding
http://jquery.com/
Debugging
https://developers.google.com/chrome-developer-tools/
https://addons.mozilla.org/En-us/firefox/addon/firebug/
Viewing JSON
https://chrome.google.com/webstore/detail/jsonformatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en
Testing HTTP Requests
http://curl.haxx.se/docs/manpage.html
Example Project
Introduction
We have created a very small demo project to help get started with some of the “bare bone” mechanisms. The project source can be found at https://dl.dropboxusercontent.com/u/86743967/mashable.zip
and the end result can be viewed at http://minrva.library.illinois.edu/. The following tutorial assumes you have set up your programming environment. API
The first task is to identify APIs that provide data and services that would be useful. We signed up for a mashape account and found a fun API that converts a sentence into “Yoda-­‐speak”. The API can be found here: https://www.mashape.com/ismaelc/yoda-­‐speak#!endpoint-­‐1-­‐Yoda-­‐Speak Test HTTP Request
Since there are many ways in which the mashup can fail silently, a good idea is to test the API functionality at this point. We used the terminal on a Mac computer to run a cURL statement. The results: curl --include --request GET
'https://yoda.p.mashape.com/yoda?sentence=You%20will%20learn%20how%20t
o%20speak%20like%20me%20someday.%20%20Oh%20wait.' \
--header "X-Mashape-Authorization: 9wg1LauwdZklwbC3FxqigeNNYPiw9gkz"
HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
date: Thu, 03 Oct 2013 10:52:27 GMT
X-Mashape-Proxy-Response: false
X-Mashape-Version: 3.1.2
x-powered-by: Express
Content-Length: 57
Connection: keep-alive
Learn how to speak like me someday, you will. Oh wait.
Bootstrap Layout and Design
By copying the HTML from http://getbootstrap.com/2.3.2/examples/starter-­‐
template.html we created an index.html page very quickly. We used Chrome’s developer tools to find out that our index.html page had missing JavaScript dependencies. We resolved the issue by downloading/adding the missing files and file hierarchy. AJAX Call to API
We used the example on mashape (http://blog.mashape.com/post/44798090783/mashape-­‐sample-­‐code-­‐for-­‐
executing-­‐an-­‐ajax-­‐request-­‐using ) to add the JavaScript necessary to connect our index.html page to the Yoda-­‐speak API. Same-origin Policy
An important note is that our AJAX call uses CORS. There are other alternatives to circumvent the same-­‐origin policy, but CORS is one of the most modern and simplest methods. Another simple method is to use a proxy. A usable PHP proxy can be found here: https://github.com/chatmongers/http-bind-proxy/blob/master/php/http-bind.php
One final alternative offered in this tutorial is jsonp. Yahoo Pipes can convert json
to jsonp. An example of JavaScript that uses this technique can be found here:
https://gist.github.com/psychemedia/316660
Final Touches
We last, but not least, change some titles and write a bit of custom JavaScript to display the results in a logical manner on the web page. See the introduction for the final results