<div class="note">
<p>This is a group lab. You <strong>MAY</strong> work with up to one other person (we encourage you to do so).</p>
<p>Choose one person to submit your work, and make sure both names are on your submission.</p>
<!-- <p>You may submit your answers in a plain .txt file or as a HTML web page.</p> -->
</div>
<section id="introduction">
<h3>Introduction</h3>
<p>Today you’ll explore a developers’ API of your choice, and use it to fetch and inject data using JSONP.</p>
<p>The experience you get exploring APIs and making requests to web services is more important than the code you write, which will be similar to what we’ve already done.</p>
<h4>An Important Note on API Keys</h4>
<p>Many APIs require registering for a developer’s key in order to get data from their web services. Using these can be somewhat complicated.</p>
<p>The most common form of authentication is a string (“key”) which you are given when you register your website or app. This string is your program’s unique identifier, and is passed as a parameter with each request you make to their web service.</p>
<p>Your key should be kept fairly private: if you allow someone else to use your app’s ID, they will incur usage for your account and could do bad things to get you banned from using the web service.</p>
<div class="note important">
<p>If you choose an API which requires an API key, you may need to submit a small amount of personal information (like your email address, website, and/or telephone number) in order to register your key. You’ll also need to agree to their Terms of Service.</p>
<p>If you’d rather not submit this information, or if you’d rather not agree to their ToS, try to find a web service that has useful features that don’t require an API key, or whose ToS you feel comfortable agreeing to.</p>
</div>
<p>If you register for a key, whenever you’re asked for a website or URL, use the URL of your INFO 343 account space:</p>
<pre><code>http<strong style="border-bottom: solid 2px black">s</strong>://info343.ischool.uw.edu/<var>youruwnetid</var>/</code></pre>
<p>Some services which have user accounts (e.g., Twitter, Instagram, Facebook) require that you submit an additional <strong>user authentication</strong> token to do certain things <em>on behalf of</em> one of their account holders. For example, to post a tweet, you have to also submit the login credentials of the Twitter user whose feed the tweet will go into. (Otherwise you or anyone else could post to anyone’s twitter feed!)</p>
<p>Doing that adds another level of complexity, so we’d recommend avoiding those types of requests for the purpose of this lab. However, if you have an account on the service you’re using, feel free to experiment with user-authenticated requests if you like.</p>
</section>
<section>
<?= t_head('Choose an API', "30–35") ?>
<p>Begin by selecting an API to use. Take some time to explore several APIs and see what features they have. Here is a list of some popular APIs:</p>
<ul>
<li><a href="http://instagram.com/developer/">Instagram</a></li>
<li><a href="https://developers.google.com/youtube/2.0/developers_guide_protocol_audience#Supported_Feeds">YouTube</a></li>
<li><a href="https://developer.foursquare.com/overview/">foursquare</a></li>
<li><a href="http://www.reddit.com/dev/api">Reddit</a></li>
<li><a href="http://www.flickr.com/services/api/">Flickr</a> (in particular, <code>flickr.photos.search</code>)</li>
<li><a href="http://www.yelp.com/developers/documentation/v2/overview">Yelp</a></li>
</ul>
<p>Or browse a <a href="http://www.programmableweb.com/apis/directory/1?sort=mashups">full list of popular web service APIs and mashups</a>.</p>
<p>We’d suggest “skimming” through several APIs’ documentation quickly to get a feel for what features are available, then focusing your attention on one of them to get more familiar with how it works.</p>
<p class="note">Look for “broad” data that is the bread and butter of the service (photos, reviews, checkins, etc.), rather than “narrow” data like profile or user information.</p>
<p>Note that in some developer documentation their actual web service data feeds are somewhat hidden: Many APIs highlight their “plug-and-play” HTML code for users who want to embed something quickly. Look for keywords like “data feed” or “RESTful API” to find data web services.</p>
<p>Many services offer sophisticated “preview” tools that allow you to simulate requests, plug in parameter values, and otherwise configure your request before putting it in your code. You may wish to use these tools to decide whether you want to use their web service.</p>
<p class="important note"><strong>IMPORTANT:</strong> You <strong>MUST</strong> choose an API which supports JSONP. Otherwise you’ll be unable to fetch data using JavaScript in the browser. Look for explicit mention of JSONP, or for parameters called <code>callback</code>, <code>jsonp_callback</code>, etc.</p>
</section>
<section>
<?= t_head('Fetch & Inject Data', '20–25') ?>
<p>Now that you’ve selected a web service, get some data from it, in XML or JSON format, and inject it into the page.</p>
<p>Create <samp>lab8.html</samp> and <samp>lab8.js</samp> files. (You can use the <a href="../../minilabs/14/#make-jsonp-request-for-tweets">Mini-lab 13</a> skeletons as a template if you like.)</p>
<p>This part of the lab is very open-ended. The only requirement is that you fetch a <strong>list</strong> of items (e.g., Instagram photo posts, FB posts, Flickr photos, Reddit stories) and inject at least three pieces of data for each item into the page.</p>
<p class="note">Remember that you can inspect the JSON data given to you in the Net tab of Firebug: Click the request, then click the JSON tab. If no JSON tab is available, click the Response tab to troubleshoot why JSON code was not sent.</p>
</section>
<footer>
<p>If you’ve finished everything, good job! Experiment with other things you can do with your data. Mashup!</p>
</footer>