|
|
<!doctype html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title></title>
|
|
|
|
|
|
<meta name="description" content="">
|
|
|
|
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
|
|
<!-- For syntax highlighting -->
|
|
|
<link rel="stylesheet" href="../../../../lib/css/zenburn.css">
|
|
|
<link rel="stylesheet" href="../../../../lib/css/prism.css">
|
|
|
|
|
|
<link rel="stylesheet" href="../../../../css/reveal.css">
|
|
|
<link rel="stylesheet" href="../../../../css/theme/ga-title.css" id="theme">
|
|
|
|
|
|
<!--[if lt IE 9]>
|
|
|
<script src="lib/js/html5shiv.js"></script>
|
|
|
<![endif]-->
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/python-ga/proxima-nova/fonts.css" />
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="language-javascript">
|
|
|
|
|
|
<div class="reveal">
|
|
|
|
|
|
<!-- Any section element inside of this container is displayed as a slide -->
|
|
|
<div class="slides">
|
|
|
|
|
|
|
|
|
<!--
|
|
|
title: Modules and Libraries
|
|
|
type: lesson
|
|
|
duration: "00:45"
|
|
|
-->
|
|
|
<section id="section" class="level2 separator">
|
|
|
<h2><img src="https://s3.amazonaws.com/python-ga/images/GA_Cog_Medium_White_RGB.png" /></h2>
|
|
|
<h1>
|
|
|
Introduction to APIs
|
|
|
</h1>
|
|
|
<!--
|
|
|
|
|
|
## Overview
|
|
|
This lesson walks through the idea of application programming interfaces (APIs), starting with their definition. It touches on JSON versus XML, followed by a series of exercises that introduce keys and parameters.
|
|
|
|
|
|
## Learning Objectives
|
|
|
In this lesson, students will:
|
|
|
|
|
|
- Describe what an application programming interface (API) is and why we might use one.
|
|
|
- Identify common APIs on the web.
|
|
|
- Call an API.
|
|
|
|
|
|
|
|
|
|
|
|
## Duration
|
|
|
45 minutes
|
|
|
|
|
|
#### Timing Notes:
|
|
|
This is the last lesson of the last unit of core Python material; after this is the unit lab. The slides as laid out here are quite short, designed to allow a lot of flex time for you to add exercises on any topics the students have struggled with (of note, `hw-10wk-9` has much more API practice).
|
|
|
|
|
|
Address any remaining questions in the parking lot here.
|
|
|
|
|
|
|
|
|
## Suggested Agenda
|
|
|
|
|
|
| Time | Activity |
|
|
|
| --- | --- |
|
|
|
| 0:00 - 0:03 | Welcome |
|
|
|
| 0:03 - 0:10 | API Overview |
|
|
|
| 0:11 - 0:42 | Calling APIs |
|
|
|
| 0:42 - 0:45 | Summary |
|
|
|
|
|
|
## Differentiation and Extensions
|
|
|
- For more advanced students, have them call other APIs (refer back to the early slide with the list) and print out the information for that legibly.
|
|
|
- Have them look through the OpenWeather API and print out even more information.
|
|
|
- Fill extra time by chaining together exercises on everything they've learned.
|
|
|
|
|
|
## In Class: Materials
|
|
|
- Projector
|
|
|
- Internet connection
|
|
|
- Python 3
|
|
|
-->
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="lesson-objectives" class="level2">
|
|
|
<h2>Lesson Objectives</h2>
|
|
|
<p><em>After this lesson, you will be able to…</em></p>
|
|
|
<ul>
|
|
|
<li>Describe what an application programming interface (API) is and why we might use one.</li>
|
|
|
<li>Identify common APIs on the web.</li>
|
|
|
<li>Call an API.</li>
|
|
|
</ul>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="discussion-web-magic" class="level2">
|
|
|
<h2>Discussion: Web Magic</h2>
|
|
|
<p>Have you seen…</p>
|
|
|
<ul>
|
|
|
<li>A website with Google Maps on the page (like Yelp)?</li>
|
|
|
<li>A program that had live stock market info?</li>
|
|
|
<li>A website that isn’t Twitter but shows a live Twitter feed?</li>
|
|
|
<li>Any app that pulls info from somewhere else?</li>
|
|
|
</ul>
|
|
|
<p>How did they do this?</p>
|
|
|
<p><img src="https://twimgs.com/ddj/images/article/2014/0314/GoogleMap_adrian.gif" /></p>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>Give examples here, like…</li>
|
|
|
<li>Have you seen a website that had a Google Map on it like Yelp? Yelp’s developers <em>didn’t</em> build that map themselves, as it was created by Google. What if you want a Google Map embedded in your web app to show people where they can visit you? You aren’t going to make that map yourself, so somehow you have to call Google. Well, Google has a way you can get that map information — all you have to do is send a request to the URL that Google provides, and it gives you back a map you can use.</li>
|
|
|
</ul>
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Get students discussing.</li>
|
|
|
<li>Terminology note: Google Maps is <em>embedded</em> on the page.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="apis-application-program-interfaces" class="level2">
|
|
|
<h2>APIs (Application Program Interfaces)</h2>
|
|
|
<p>An API is a service that provides raw data for public use.</p>
|
|
|
<p>APIs give us data, maps, anything!</p>
|
|
|
<table>
|
|
|
<colgroup>
|
|
|
<col style="width: 33%" />
|
|
|
<col style="width: 66%" />
|
|
|
</colgroup>
|
|
|
<thead>
|
|
|
<tr class="header">
|
|
|
<th>What’s the API?</th>
|
|
|
<th>Sample URL — put this in a new tab!</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr class="odd">
|
|
|
<td><strong><a href="http://swapi.co/api/people/3" target="_blank">The Star Wars API: Request R2-D2 info</a></strong></td>
|
|
|
<td>http://swapi.co/api/people/3</td>
|
|
|
</tr>
|
|
|
<tr class="even">
|
|
|
<td><strong><a href="http://dev.markitondemand.com/Api/Quote/xml?symbol=AAPL" target="_blank">Markit Digital’s API: Request current Apple stock info</a></strong></td>
|
|
|
<td>http://dev.markitondemand.com/Api/Quote/xml?symbol=AAPL</td>
|
|
|
</tr>
|
|
|
<tr class="odd">
|
|
|
<td><strong><a href="https://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22" target="_blank">OpenWeatherMap: The current weather in London</a></strong></td>
|
|
|
<td>https://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
<p>Do you think you’ve been on websites that call an API?</p>
|
|
|
<blockquote>
|
|
|
<p>Does the JSON look unreadable in the browser? If you’re using Chrome, install the <a href="https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en">JSONView plugin</a>.</p>
|
|
|
</blockquote>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Open each of these URLs in a new window so students can see what happens when you call an API.</li>
|
|
|
<li>Encourage a discussion if students can think of other APIs.</li>
|
|
|
</ul>
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>Basically, an API is a service that provides raw data for public use. As third-party software developers, we can access an organization’s API and use its data within our own applications. The term now commonly refers to web URLs that can be accessed for raw data.</li>
|
|
|
<li>Why recreate data when we don’t have to? Think about past projects or ideas that would be easier if you could pull in data already gathered elsewhere.</li>
|
|
|
<li>APIs can provide us with data that we would otherwise not be able to create ourselves.</li>
|
|
|
<li>There are a variety of APIs available on the internet. To call an API, send a request to a URL and that API will return data to your program. You can pull data from anywhere that offers an API.</li>
|
|
|
<li>You can make this request as specific as you’d like — each web app out there offers different options for its API. You just have to find out what you can request!</li>
|
|
|
<li>Here are just a few examples of APIs you can use. Check it out — the left column is the common name you might know. The right column is the URL to which you, in your program, would send a request. You can click those URLs to see what each call would return.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="how-do-we-use-an-api" class="level2">
|
|
|
<h2>How Do We Use an API?</h2>
|
|
|
<p>We’ll use the <code>requests</code> module.</p>
|
|
|
<div class="sourceCode" id="cb1"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="im">import</span> requests</a>
|
|
|
<a class="sourceLine" id="cb1-2" data-line-number="2"></a>
|
|
|
<a class="sourceLine" id="cb1-3" data-line-number="3"><span class="co"># Call the API by opening the URL and reading the data.</span></a>
|
|
|
<a class="sourceLine" id="cb1-4" data-line-number="4"><span class="co"># We use the `get()` function in `requests`.</span></a>
|
|
|
<a class="sourceLine" id="cb1-5" data-line-number="5">response <span class="op">=</span> requests.get(<span class="st">"<API URL HERE>"</span>)</a>
|
|
|
<a class="sourceLine" id="cb1-6" data-line-number="6"></a>
|
|
|
<a class="sourceLine" id="cb1-7" data-line-number="7"><span class="bu">print</span>(response)</a>
|
|
|
<a class="sourceLine" id="cb1-8" data-line-number="8"><span class="co"># Prints out the requested information!</span></a></code></pre></div>
|
|
|
<p>This works, but there’s one very helpful line missing!</p>
|
|
|
<p>Before we see this in action, let’s look at what the API might return.</p>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tip:</strong></p>
|
|
|
<ul>
|
|
|
<li>Go down the code here — be sure students understand the idea.</li>
|
|
|
</ul>
|
|
|
<p><strong>Talking Point:</strong></p>
|
|
|
<ul>
|
|
|
<li>We’re going to demo this and write this code soon! But first, we need to see what the API might give us back.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="json-vs.xml" class="level2">
|
|
|
<h2>JSON vs. XML</h2>
|
|
|
<p>Imagine: You write code for a list.</p>
|
|
|
<div class="sourceCode" id="cb2"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb2-1" data-line-number="1">my_list <span class="op">=</span> [<span class="dv">1</span>, <span class="dv">4</span>, <span class="dv">2</span>]</a>
|
|
|
<a class="sourceLine" id="cb2-2" data-line-number="2">my_list.append(<span class="bu">len</span>(my_list))</a>
|
|
|
<a class="sourceLine" id="cb2-3" data-line-number="3">my_list[<span class="dv">1</span>] <span class="op">=</span> <span class="st">"new element!"</span></a>
|
|
|
<a class="sourceLine" id="cb2-4" data-line-number="4"></a>
|
|
|
<a class="sourceLine" id="cb2-5" data-line-number="5"><span class="cf">for</span> item <span class="kw">in</span> my_list:</a>
|
|
|
<a class="sourceLine" id="cb2-6" data-line-number="6"> <span class="bu">print</span> item</a></code></pre></div>
|
|
|
<p>But then, <code>my_list</code> is unexpectedly a dictionary, or an int, or even a class! The code we wrote won’t work.</p>
|
|
|
<p>APIs can give data back in two ways: JSON or XML. Depending on what the API does, we need to write our program a different way.</p>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Go down the code here — be sure students understand the idea.</li>
|
|
|
</ul>
|
|
|
<p><strong>Talking Point:</strong></p>
|
|
|
<ul>
|
|
|
<li>We’re going to demo this and write this code soon! But first, we need to see what the API might give us back.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="how-do-apis-give-us-info-option-1-json" class="level2">
|
|
|
<h2>How Do APIs Give Us Info? Option 1: JSON</h2>
|
|
|
<p>Here’s a potential return from an API:</p>
|
|
|
<div class="sourceCode" id="cb3"><pre class="sourceCode json"><code class="sourceCode json"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="fu">{</span></a>
|
|
|
<a class="sourceLine" id="cb3-2" data-line-number="2"> <span class="dt">"users"</span><span class="fu">:</span> <span class="ot">[</span></a>
|
|
|
<a class="sourceLine" id="cb3-3" data-line-number="3"> <span class="fu">{</span><span class="dt">"name"</span><span class="fu">:</span> <span class="st">"Wonder Woman"</span><span class="fu">,</span> <span class="dt">"id"</span><span class="fu">:</span> <span class="dv">0</span><span class="fu">}</span><span class="ot">,</span></a>
|
|
|
<a class="sourceLine" id="cb3-4" data-line-number="4"> <span class="fu">{</span><span class="dt">"name"</span><span class="fu">:</span> <span class="st">"Black Panther"</span><span class="fu">,</span> <span class="dt">"id"</span><span class="fu">:</span> <span class="dv">1</span><span class="fu">}</span><span class="ot">,</span></a>
|
|
|
<a class="sourceLine" id="cb3-5" data-line-number="5"> <span class="fu">{</span><span class="dt">"name"</span><span class="fu">:</span> <span class="st">"Batgirl"</span><span class="fu">,</span> <span class="dt">"id"</span><span class="fu">:</span> <span class="dv">2</span><span class="fu">}</span></a>
|
|
|
<a class="sourceLine" id="cb3-6" data-line-number="6"> <span class="ot">]</span></a>
|
|
|
<a class="sourceLine" id="cb3-7" data-line-number="7"><span class="fu">}</span></a></code></pre></div>
|
|
|
<p>Looks like a dictionary with a list of dictionaries inside it, right?</p>
|
|
|
<p>But it’s not a dictionary! It’s <strong>JSON</strong> (JavaScript Object Notation).</p>
|
|
|
<p>The <code>requests</code> module has a <a href="http://docs.python-requests.org/en/master/user/quickstart/#json-response-content">built-in JSON decoder</a> to turn JSON into a Python dictionary.</p>
|
|
|
<p>We can <strong>decode</strong> JSON with <code>decoded_data = response_from_request.json()</code>.</p>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>So, APIs are great… What does it look like?</li>
|
|
|
<li><strong>JSON</strong> stands for “JavaScript Object Notation” and has become a universal standard for serializing native data structures for transmission. It is lightweight, easy to read, and quick to parse. JSON looks like this — it’s easily readable and information is separated with braces (<code>{}</code>) and commas.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="how-do-apis-give-us-info-option-2-xml" class="level2">
|
|
|
<h2>How Do APIs Give Us Info? Option 2: XML</h2>
|
|
|
<p>Instead of JSON, we might get XML:</p>
|
|
|
<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb4-1" data-line-number="1"><span class="kw"><users></span></a>
|
|
|
<a class="sourceLine" id="cb4-2" data-line-number="2"> <span class="kw"><user</span><span class="ot"> id=</span><span class="st">"0"</span><span class="kw">></span></a>
|
|
|
<a class="sourceLine" id="cb4-3" data-line-number="3"> <span class="kw"><name></span>Wonder Woman<span class="kw"></name></span></a>
|
|
|
<a class="sourceLine" id="cb4-4" data-line-number="4"> <span class="kw"></user></span></a>
|
|
|
<a class="sourceLine" id="cb4-5" data-line-number="5"> <span class="kw"><user</span><span class="ot"> id=</span><span class="st">"1"</span><span class="kw">></span></a>
|
|
|
<a class="sourceLine" id="cb4-6" data-line-number="6"> <span class="kw"><name></span>Black Panther<span class="kw"></name></span></a>
|
|
|
<a class="sourceLine" id="cb4-7" data-line-number="7"> <span class="kw"></user></span></a>
|
|
|
<a class="sourceLine" id="cb4-8" data-line-number="8"> <span class="kw"><user</span><span class="ot"> id=</span><span class="st">"2"</span><span class="kw">></span></a>
|
|
|
<a class="sourceLine" id="cb4-9" data-line-number="9"> <span class="kw"><name></span>Batgirl<span class="kw"></name></span></a>
|
|
|
<a class="sourceLine" id="cb4-10" data-line-number="10"> <span class="kw"></user></span></a>
|
|
|
<a class="sourceLine" id="cb4-11" data-line-number="11"><span class="kw"></users></span></a></code></pre></div>
|
|
|
<p>JSON is certainly easier to read!</p>
|
|
|
<ul>
|
|
|
<li>We’ll stick with JSON whenever we can.</li>
|
|
|
</ul>
|
|
|
<blockquote>
|
|
|
<p><strong>Pro tip:</strong> Most of you don’t need to know about XML, but if you’re working with legacy code or an older API, you may have to use it. In that case, look up <a href="https://python.readthedocs.io/en/stable/library/xml.etree.elementtree.html">Element Tree XML</a>.</p>
|
|
|
</blockquote>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li><strong>XML</strong>, which stands for “Extensible Markup Language,” is one of the first serialized data formats (itself based on HTML). XML is messy and cumbersome to parse, but remains a major format because of its legacy usage across the web.</li>
|
|
|
<li>Conveniently, many APIs publish data in multiple formats and let you specify which you’d like. For example, <code>https:///api/index.php?output=json</code> or <code>https:///api/index.php?output=xml</code>.</li>
|
|
|
<li>We’ll be using JSON.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="lets-choose-an-api" class="level2">
|
|
|
<h2>Let’s Choose an API</h2>
|
|
|
<p><strong>To recap:</strong> APIs give us data we can use in either XML or JSON.</p>
|
|
|
<p>Let’s call one!</p>
|
|
|
<p>Check out <a href="http://api.open-notify.org/astros.json" target="\_blank">http://api.open-notify.org/astros.json</a>, which tells us the people currently aboard the International Space Station (ISS).</p>
|
|
|
<div class="sourceCode" id="cb5"><pre class="sourceCode json"><code class="sourceCode json"><a class="sourceLine" id="cb5-1" data-line-number="1"><span class="fu">{</span></a>
|
|
|
<a class="sourceLine" id="cb5-2" data-line-number="2"> <span class="dt">"number"</span><span class="fu">:</span> <span class="dv">5</span><span class="fu">,</span></a>
|
|
|
<a class="sourceLine" id="cb5-3" data-line-number="3"> <span class="dt">"people"</span><span class="fu">:</span> <span class="ot">[</span></a>
|
|
|
<a class="sourceLine" id="cb5-4" data-line-number="4"> <span class="fu">{</span><span class="dt">"craft"</span><span class="fu">:</span> <span class="st">"ISS"</span><span class="fu">,</span> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"Oleg Novitskiy"</span><span class="fu">}</span><span class="ot">,</span></a>
|
|
|
<a class="sourceLine" id="cb5-5" data-line-number="5"> <span class="fu">{</span><span class="dt">"craft"</span><span class="fu">:</span> <span class="st">"ISS"</span><span class="fu">,</span> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"Thomas Pesquet"</span><span class="fu">}</span><span class="ot">,</span></a>
|
|
|
<a class="sourceLine" id="cb5-6" data-line-number="6"> <span class="fu">{</span><span class="dt">"craft"</span><span class="fu">:</span> <span class="st">"ISS"</span><span class="fu">,</span> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"Peggy Whitson"</span><span class="fu">}</span><span class="ot">,</span></a>
|
|
|
<a class="sourceLine" id="cb5-7" data-line-number="7"> <span class="fu">{</span><span class="dt">"craft"</span><span class="fu">:</span> <span class="st">"ISS"</span><span class="fu">,</span> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"Fyodor Yurchikhin"</span><span class="fu">}</span><span class="ot">,</span></a>
|
|
|
<a class="sourceLine" id="cb5-8" data-line-number="8"> <span class="fu">{</span><span class="dt">"craft"</span><span class="fu">:</span> <span class="st">"ISS"</span><span class="fu">,</span> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"Jack Fischer"</span><span class="fu">}</span></a>
|
|
|
<a class="sourceLine" id="cb5-9" data-line-number="9"> <span class="ot">]</span><span class="fu">,</span></a>
|
|
|
<a class="sourceLine" id="cb5-10" data-line-number="10"> <span class="dt">"message"</span><span class="fu">:</span> <span class="st">"success"</span></a>
|
|
|
<a class="sourceLine" id="cb5-11" data-line-number="11"><span class="fu">}</span></a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>The number of astronauts and names currently aboard the International Space Station (ISS).</li>
|
|
|
<li>Go to the website in the browser so that students can see what it returns.</li>
|
|
|
<li>Ask if it’s JSON or XML to check their memory.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="calling-an-api" class="level2">
|
|
|
<h2>Calling an API</h2>
|
|
|
<ul>
|
|
|
<li>Import the <code>request</code> module.</li>
|
|
|
<li>Call the API (<code>requests.get()</code>).</li>
|
|
|
<li>Parse the response with <code>response.json()</code>.</li>
|
|
|
</ul>
|
|
|
<iframe height="400px" width="100%" src="https://repl.it/@SuperTernary/python-programming-apis-iss?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals">
|
|
|
</iframe>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Go down this code line by line. Why do we import these modules? What does each line do? Where do <code>.read</code> and <code>.loads</code> come from?</li>
|
|
|
<li>Terminology: parse.</li>
|
|
|
</ul>
|
|
|
<p><strong>Repl.it note:</strong></p>
|
|
|
<div class="sourceCode" id="cb6"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb6-1" data-line-number="1"><span class="co"># Call the API by opening the URL and reading the data.</span></a>
|
|
|
<a class="sourceLine" id="cb6-2" data-line-number="2">response <span class="op">=</span> requests.get(<span class="st">"http://api.open-notify.org/astros.json"</span>)</a>
|
|
|
<a class="sourceLine" id="cb6-3" data-line-number="3"></a>
|
|
|
<a class="sourceLine" id="cb6-4" data-line-number="4"><span class="co"># Decode the raw JSON data.</span></a>
|
|
|
<a class="sourceLine" id="cb6-5" data-line-number="5">response_data <span class="op">=</span> response.json()</a>
|
|
|
<a class="sourceLine" id="cb6-6" data-line-number="6"></a>
|
|
|
<a class="sourceLine" id="cb6-7" data-line-number="7"><span class="bu">print</span>(response_data)</a></code></pre></div>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="you-do-calling-an-api" class="level2">
|
|
|
<h2>You Do: Calling an API</h2>
|
|
|
<p>Open a new file, <code>my_api.py</code>. Type and run the code:</p>
|
|
|
<div class="sourceCode" id="cb7"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb7-1" data-line-number="1"><span class="im">import</span> requests</a>
|
|
|
<a class="sourceLine" id="cb7-2" data-line-number="2"></a>
|
|
|
<a class="sourceLine" id="cb7-3" data-line-number="3"><span class="co"># Call the API by opening the URL and reading the data.</span></a>
|
|
|
<a class="sourceLine" id="cb7-4" data-line-number="4">response <span class="op">=</span> requests.get(<span class="st">"http://api.open-notify.org/astros.json"</span>)</a>
|
|
|
<a class="sourceLine" id="cb7-5" data-line-number="5"></a>
|
|
|
<a class="sourceLine" id="cb7-6" data-line-number="6"><span class="co"># Decode the raw JSON data.</span></a>
|
|
|
<a class="sourceLine" id="cb7-7" data-line-number="7">response_data <span class="op">=</span> response.json()</a>
|
|
|
<a class="sourceLine" id="cb7-8" data-line-number="8"></a>
|
|
|
<a class="sourceLine" id="cb7-9" data-line-number="9"><span class="bu">print</span>(response_data)</a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>It’s the same code to get them used to typing it with an expected output. Discourage copying anything but the URL.</li>
|
|
|
<li>Walk around to be sure everyone can do it.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="we-do-a-new-api" class="level2">
|
|
|
<h2>We Do: A New API</h2>
|
|
|
<p>Awesome! Go back to your file. Let’s instead call this URL:</p>
|
|
|
<p><code>http://dev.markitondemand.com/Api/Quote/xml?symbol=AAPL</code></p>
|
|
|
<p>Why does it break? We can’t parse XML like JSON.</p>
|
|
|
<div class="sourceCode" id="cb8"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb8-1" data-line-number="1"><span class="kw"><QuoteApiModel></span></a>
|
|
|
<a class="sourceLine" id="cb8-2" data-line-number="2"> <span class="kw"><Data></span></a>
|
|
|
<a class="sourceLine" id="cb8-3" data-line-number="3"> <span class="kw"><Status></span>SUCCESS<span class="kw"></Status></span></a>
|
|
|
<a class="sourceLine" id="cb8-4" data-line-number="4"> <span class="kw"><Name></span>Apple Inc<span class="kw"></Name></span></a>
|
|
|
<a class="sourceLine" id="cb8-5" data-line-number="5"> <span class="kw"><Symbol></span>AAPL<span class="kw"></Symbol></span></a>
|
|
|
<a class="sourceLine" id="cb8-6" data-line-number="6"> <span class="kw"><LastPrice></span>185.5<span class="kw"></LastPrice></span></a>
|
|
|
<a class="sourceLine" id="cb8-7" data-line-number="7"> <span class="kw"><Change></span>1.34<span class="kw"></Change></span></a>
|
|
|
<a class="sourceLine" id="cb8-8" data-line-number="8"> <span class="kw"><ChangePercent></span>0.7276281494<span class="kw"></ChangePercent></span></a>
|
|
|
<a class="sourceLine" id="cb8-9" data-line-number="9"> <span class="kw"><Timestamp></span>Thu Jun 28 00:00:00 UTC-04:00 2018<span class="kw"></Timestamp></span></a>
|
|
|
<a class="sourceLine" id="cb8-10" data-line-number="10"> <span class="kw"><MarketCap></span>911758099000<span class="kw"></MarketCap></span></a>
|
|
|
<a class="sourceLine" id="cb8-11" data-line-number="11"> <span class="kw"><Volume></span>17365235<span class="kw"></Volume></span></a>
|
|
|
<a class="sourceLine" id="cb8-12" data-line-number="12"> <span class="kw"><ChangeYTD></span>169.23<span class="kw"></ChangeYTD></span></a>
|
|
|
<a class="sourceLine" id="cb8-13" data-line-number="13"> <span class="kw"><ChangePercentYTD></span>9.6141346097<span class="kw"></ChangePercentYTD></span></a>
|
|
|
<a class="sourceLine" id="cb8-14" data-line-number="14"> <span class="kw"><High></span>186.21<span class="kw"></High></span></a>
|
|
|
<a class="sourceLine" id="cb8-15" data-line-number="15"> <span class="kw"><Low></span>183.8<span class="kw"></Low></span></a>
|
|
|
<a class="sourceLine" id="cb8-16" data-line-number="16"> <span class="kw"><Open></span>184.1<span class="kw"></Open></span></a>
|
|
|
<a class="sourceLine" id="cb8-17" data-line-number="17"> <span class="kw"></Data></span></a>
|
|
|
<a class="sourceLine" id="cb8-18" data-line-number="18"><span class="kw"></QuoteApiModel></span></a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Do this with them!</li>
|
|
|
<li>This is just a quick aside — the next slide is back to JSON.</li>
|
|
|
</ul>
|
|
|
<p><strong>Talking Point:</strong></p>
|
|
|
<ul>
|
|
|
<li>XML is out of the scope of our class. But, if your API errors, check that you’re correctly parsing XML or JSON. We’ll go back to JSON now.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="quick-review" class="level2">
|
|
|
<h2>Quick Review</h2>
|
|
|
<p>We’ve called an API! Great job. We did this with the <code>get()</code> function in the <code>requests</code> module. APIs are made available by other websites or applications. They give us data we can use in either XML or JSON.</p>
|
|
|
<div class="sourceCode" id="cb9"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb9-1" data-line-number="1"><span class="im">import</span> requests</a>
|
|
|
<a class="sourceLine" id="cb9-2" data-line-number="2">response <span class="op">=</span> requests.get(<span class="st">"http://api.open-notify.org/astros.json"</span>)</a>
|
|
|
<a class="sourceLine" id="cb9-3" data-line-number="3">response_data <span class="op">=</span> response.json()</a>
|
|
|
<a class="sourceLine" id="cb9-4" data-line-number="4"><span class="bu">print</span>(response_data)</a></code></pre></div>
|
|
|
<p>JSON:</p>
|
|
|
<div class="sourceCode" id="cb10"><pre class="sourceCode json"><code class="sourceCode json"><a class="sourceLine" id="cb10-1" data-line-number="1"><span class="fu">{</span></a>
|
|
|
<a class="sourceLine" id="cb10-2" data-line-number="2"> <span class="dt">"users"</span><span class="fu">:</span> <span class="ot">[</span></a>
|
|
|
<a class="sourceLine" id="cb10-3" data-line-number="3"> <span class="fu">{</span><span class="dt">"name"</span><span class="fu">:</span> <span class="st">"Wonder Woman"</span><span class="fu">,</span> <span class="dt">"id"</span><span class="fu">:</span> <span class="dv">0</span><span class="fu">}</span><span class="ot">,</span></a>
|
|
|
<a class="sourceLine" id="cb10-4" data-line-number="4"> <span class="fu">{</span><span class="dt">"name"</span><span class="fu">:</span> <span class="st">"Black Panther"</span><span class="fu">,</span> <span class="dt">"id"</span><span class="fu">:</span> <span class="dv">1</span><span class="fu">}</span></a>
|
|
|
<a class="sourceLine" id="cb10-5" data-line-number="5"> <span class="ot">]</span></a>
|
|
|
<a class="sourceLine" id="cb10-6" data-line-number="6"><span class="fu">}</span></a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="quick-review-1" class="level2">
|
|
|
<h2>Quick Review</h2>
|
|
|
<p>XML:</p>
|
|
|
<div class="sourceCode" id="cb11"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb11-1" data-line-number="1"><span class="kw"><users></span></a>
|
|
|
<a class="sourceLine" id="cb11-2" data-line-number="2"> <span class="kw"><user</span><span class="ot"> id=</span><span class="st">"0"</span><span class="kw">></span></a>
|
|
|
<a class="sourceLine" id="cb11-3" data-line-number="3"> <span class="kw"><name></span>Wonder Woman<span class="kw"></name></span></a>
|
|
|
<a class="sourceLine" id="cb11-4" data-line-number="4"> <span class="kw"></user></span></a>
|
|
|
<a class="sourceLine" id="cb11-5" data-line-number="5"> <span class="kw"><user</span><span class="ot"> id=</span><span class="st">"1"</span><span class="kw">></span></a>
|
|
|
<a class="sourceLine" id="cb11-6" data-line-number="6"> <span class="kw"><name></span>Black Panther<span class="kw"></name></span></a>
|
|
|
<a class="sourceLine" id="cb11-7" data-line-number="7"> <span class="kw"></user></span></a>
|
|
|
<a class="sourceLine" id="cb11-8" data-line-number="8"><span class="kw"></users></span></a></code></pre></div>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="you-do-back-to-json" class="level2">
|
|
|
<h2>You Do: Back to JSON</h2>
|
|
|
<p>Back in your file, change the API call back to <code>http://api.open-notify.org/astros.json</code>.</p>
|
|
|
<p>Once it’s decoded, it’s a dictionary!</p>
|
|
|
<p>Replace your <code>print</code> statement:</p>
|
|
|
<div class="sourceCode" id="cb12"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb12-1" data-line-number="1"><span class="cf">for</span> key, ratings <span class="kw">in</span> response_data_decoded.items():</a>
|
|
|
<a class="sourceLine" id="cb12-2" data-line-number="2"> <span class="bu">print</span>(<span class="st">"Key:"</span>, key, <span class="st">"Value:"</span>, ratings, <span class="st">"</span><span class="ch">\n</span><span class="st">"</span>)</a></code></pre></div>
|
|
|
<p>Can we go further? Try to only print the <code>name</code>s of the astronauts.</p>
|
|
|
<aside class="notes">
|
|
|
<p>5 MINUTES</p>
|
|
|
<p><strong>Teaching Tip:</strong></p>
|
|
|
<ul>
|
|
|
<li>Walk through printing the original output again, but give students a few minutes to try to print only the names before showing the answer on the next slide.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="name-printing-solution" class="level2">
|
|
|
<h2>Name Printing: Solution</h2>
|
|
|
<p>Working backward, we have a:</p>
|
|
|
<ul>
|
|
|
<li>Dictionary (key: <code>name</code>).</li>
|
|
|
<li>Which is inside a list (the value of <code>people</code>).</li>
|
|
|
<li>Which is inside a dictionary (key: <code>people</code>).</li>
|
|
|
</ul>
|
|
|
<pre><code>For message the value is success.
|
|
|
|
|
|
For people the value is [{'craft': 'ISS', 'name': 'Oleg Artemyev'}, {'craft': 'ISS', 'name': 'Andrew Feustel'}, .....].
|
|
|
|
|
|
For number the value is 6.</code></pre>
|
|
|
<div class="sourceCode" id="cb14"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb14-1" data-line-number="1"><span class="cf">for</span> item <span class="kw">in</span> response_data_decoded[<span class="st">"people"</span>]:</a>
|
|
|
<a class="sourceLine" id="cb14-2" data-line-number="2"> <span class="bu">print</span>(item[<span class="st">"name"</span>])</a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Walk through this with the students.</li>
|
|
|
<li>Show the code!</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="you-do-shakespeare" class="level2">
|
|
|
<h2>You Do: Shakespeare</h2>
|
|
|
<p>In your file, call the Shakespeare API <code>http://ShakeItSpeare.com/api/poem</code>.</p>
|
|
|
<p>Print only the poem.</p>
|
|
|
<aside class="notes">
|
|
|
<p>3 MINUTES</p>
|
|
|
<p><strong>Teaching Tip:</strong></p>
|
|
|
<ul>
|
|
|
<li>Give students a few minutes to try to print only the poem before showing the answer on the next slide.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="shakespeare-solution" class="level2">
|
|
|
<h2>Shakespeare: Solution</h2>
|
|
|
<p>Print only the poem.</p>
|
|
|
<div class="sourceCode" id="cb15"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb15-1" data-line-number="1"><span class="im">import</span> requests</a>
|
|
|
<a class="sourceLine" id="cb15-2" data-line-number="2"></a>
|
|
|
<a class="sourceLine" id="cb15-3" data-line-number="3"><span class="co"># Call the API by opening the URL and reading the data.</span></a>
|
|
|
<a class="sourceLine" id="cb15-4" data-line-number="4">response <span class="op">=</span> requests.get(<span class="st">"http://ShakeItSpeare.com/api/poem"</span>)</a>
|
|
|
<a class="sourceLine" id="cb15-5" data-line-number="5"></a>
|
|
|
<a class="sourceLine" id="cb15-6" data-line-number="6"><span class="co"># Decode the raw JSON data.</span></a>
|
|
|
<a class="sourceLine" id="cb15-7" data-line-number="7">response_data <span class="op">=</span> response.json()</a>
|
|
|
<a class="sourceLine" id="cb15-8" data-line-number="8"></a>
|
|
|
<a class="sourceLine" id="cb15-9" data-line-number="9"><span class="bu">print</span>(response_data[<span class="st">"poem"</span>])</a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Walk through this with them.</li>
|
|
|
<li>Show the code!</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="quick-review-2" class="level2">
|
|
|
<h2>Quick Review</h2>
|
|
|
<p>When we convert JSON, it keeps the same format, only in a Python structure.</p>
|
|
|
<p>When parsing an API’s return, look through the JSON to find the exact structure you need. Is it the string value from the <code>poem</code> key? Or the value from each <code>name</code> key in a list of dictionaries, which is the value of the <code>people</code> key?</p>
|
|
|
<p>Think it through before writing your code.</p>
|
|
|
<div class="sourceCode" id="cb16"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb16-1" data-line-number="1"><span class="co"># From the ISS API:</span></a>
|
|
|
<a class="sourceLine" id="cb16-2" data-line-number="2">{ <span class="co"># The outer dictionary</span></a>
|
|
|
<a class="sourceLine" id="cb16-3" data-line-number="3"> <span class="st">"number"</span>: <span class="dv">5</span>, <span class="co"># Key: value</span></a>
|
|
|
<a class="sourceLine" id="cb16-4" data-line-number="4"> <span class="st">"people"</span>: [ <span class="co"># Key and value, again. Here, the value is a list of dictionaries.</span></a>
|
|
|
<a class="sourceLine" id="cb16-5" data-line-number="5"> {<span class="st">"craft"</span>: <span class="st">"ISS"</span>, <span class="st">"name"</span>: <span class="st">"Oleg Novitskiy"</span>},</a>
|
|
|
<a class="sourceLine" id="cb16-6" data-line-number="6"> {<span class="st">"craft"</span>: <span class="st">"ISS"</span>, <span class="st">"name"</span>: <span class="st">"Thomas Pesquet"</span>},</a>
|
|
|
<a class="sourceLine" id="cb16-7" data-line-number="7"> {<span class="st">"craft"</span>: <span class="st">"ISS"</span>, <span class="st">"name"</span>: <span class="st">"Peggy Whitson"</span>},</a>
|
|
|
<a class="sourceLine" id="cb16-8" data-line-number="8"> {<span class="st">"craft"</span>: <span class="st">"ISS"</span>, <span class="st">"name"</span>: <span class="st">"Fyodor Yurchikhin"</span>},</a>
|
|
|
<a class="sourceLine" id="cb16-9" data-line-number="9"> {<span class="st">"craft"</span>: <span class="st">"ISS"</span>, <span class="st">"name"</span>: <span class="st">"Jack Fischer"</span>}</a>
|
|
|
<a class="sourceLine" id="cb16-10" data-line-number="10"> ],</a>
|
|
|
<a class="sourceLine" id="cb16-11" data-line-number="11"> <span class="st">"message"</span>: <span class="st">"success"</span> <span class="co"># Key and value.</span></a>
|
|
|
<a class="sourceLine" id="cb16-12" data-line-number="12">}</a>
|
|
|
<a class="sourceLine" id="cb16-13" data-line-number="13"></a>
|
|
|
<a class="sourceLine" id="cb16-14" data-line-number="14"><span class="co"># From the Shakespeare API</span></a>
|
|
|
<a class="sourceLine" id="cb16-15" data-line-number="15"></a>
|
|
|
<a class="sourceLine" id="cb16-16" data-line-number="16">{ <span class="co"># The outer dictionary.</span></a>
|
|
|
<a class="sourceLine" id="cb16-17" data-line-number="17"> <span class="co"># The first key: value is the poem.</span></a>
|
|
|
<a class="sourceLine" id="cb16-18" data-line-number="18"> <span class="st">'poem'</span>: <span class="st">'Pardoned!</span><span class="ch">\n</span><span class="st">Nurs.</span><span class="ch">\n</span><span class="st">Bepaint my cheek?'</span>,</a>
|
|
|
<a class="sourceLine" id="cb16-19" data-line-number="19"> <span class="st">'markov'</span>: <span class="dv">2</span>, <span class="co"># The second key: value pair.</span></a>
|
|
|
<a class="sourceLine" id="cb16-20" data-line-number="20"> <span class="st">'lines'</span>: <span class="dv">3</span> <span class="co"># The third key: value pair. This is the number of lines in the poem.</span></a>
|
|
|
<a class="sourceLine" id="cb16-21" data-line-number="21">}</a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tip:</strong></p>
|
|
|
<ul>
|
|
|
<li>Do a quick check for understanding.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="i-do-api-authentication" class="level2">
|
|
|
<h2>I Do: API Authentication</h2>
|
|
|
<p>Many APIs are free but require a <strong>key</strong>. This identifies the developer requesting access.</p>
|
|
|
<p>If we call the Giphy API:</p>
|
|
|
<ul>
|
|
|
<li><p>With no key, <code>http://api.giphy.com/v1/gifs/search?q=funny+cat</code>, we get <code>Error - Unauthorized</code>!</p></li>
|
|
|
<li><p>With a key, <code>http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC</code>, it works!</p></li>
|
|
|
</ul>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="i-do-api-authentication-1" class="level2">
|
|
|
<h2>I Do: API Authentication</h2>
|
|
|
<p>Syntax Notes:</p>
|
|
|
<ul>
|
|
|
<li>The main API URL is <code>http://api.giphy.com/v1/gifs/search</code>.</li>
|
|
|
<li><code>?</code> always delineates a URL and its parameters.
|
|
|
<ul>
|
|
|
<li>(The <code>?</code> is a standard for every URL! Searching Google for “banana,” with <code>q</code> short for “query:” <code>https://www.google.com/search?q=banana</code>).</li>
|
|
|
<li>(Here’s another one! Searching Amazon for “banana:” <code>https://www.amazon.com/s?field-keywords=banana</code>.)</li>
|
|
|
</ul></li>
|
|
|
</ul>
|
|
|
<p><strong>Most importantly</strong>, never publish your key for a backend service, including on GitHub! (This is an example.) There are other ways to provide your key to a server in order to keep that key safe. However, if your code is using JavaScript, that’s ok as that provides only read access in general (assuming you have your permissions properly configured.) This is a sticking point for developers coming to Python from a front-end perspective.</p>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Syntax is called out here for the first time. Continue calling it out throughout the rest of the lesson. Stress that every API has different parameters — read the docs!</li>
|
|
|
<li>Show this in a browser.</li>
|
|
|
</ul>
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>While the majority of APIs are free to use, many of them require an API “key” that identifies the developer requesting data access.</li>
|
|
|
<li>This is done to regulate usage and prevent abuse. Some APIs also rate-limit developers, meaning they have caps on the free data allowed during a given time period.</li>
|
|
|
<li>Some APIs, such as Spotify’s music catalog, might seem like they should be available for anyone to access, but imagine if PayPal had an API from which shops could request your money. Now, imagine Etsy calls PayPal when you buy something. You’d want Etsy to have to prove it was actually Etsy, right? You don’t want anyone to be able to pretend to be Etsy, go to PayPal, and charge you $500. Instead, you’d want Etsy to somehow authenticate to PayPal.</li>
|
|
|
<li>This is accomplished by giving Etsy a private key to use at PayPal that only Etsy knows. Every time Etsy makes a request to PayPal, Etsy can say, “Hey, I’m requesting this. Here is my proof that I’m allowed to do so.”</li>
|
|
|
<li>When you are calling APIs that require a key, it’s up to you to store those keys somewhere private. They are the only proof that you are you and you are allowed to call that API, after all.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="you-do-openweather-api" class="level2">
|
|
|
<h2>You Do: OpenWeather API</h2>
|
|
|
<p>Read about the API <a href="https://openweathermap.org/current" target="\_blank">here</a>.</p>
|
|
|
<p>Use this key: <code>&appid=052f26926ae9784c2d677ca7bc5dec98</code>.</p>
|
|
|
<p>Call this URL: <code>http://api.openweathermap.org/data/2.5/weather?zip=<ZIP_CODE_HERE>,us&appid=052f26926ae9784c2d677ca7bc5dec98</code>.</p>
|
|
|
<p>Note the parameters:</p>
|
|
|
<ul>
|
|
|
<li><code>zip=<ZIP_CODE_HERE></code></li>
|
|
|
<li><code>appid=<KEY HERE></code></li>
|
|
|
</ul>
|
|
|
<p>Enter any zip code you choose (e.g., <code>60614</code>).</p>
|
|
|
<ul>
|
|
|
<li>Display the current temperature, high and low temperature, current weather description, and the name of the city that came back from the API.</li>
|
|
|
</ul>
|
|
|
<aside class="notes">
|
|
|
<p>5-10 MINUTES</p>
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li><p>The API key provided is rate-limited to 60 calls per minute. If you foresee a need to register additional API keys, go to https://openweathermap.org/appid <strong>before class</strong> as it can take up to one hour to activate an API key.</p></li>
|
|
|
<li><p>Give students five or 10 minutes — encourage them to look through the documentation. If students look lost, run this as a We Do and open the documentation with them. It’s not a quiz — it’s just to get their brains thinking.</p></li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="openweather-api-solution" class="level2">
|
|
|
<h2>OpenWeather API Solution</h2>
|
|
|
<iframe height="400px" width="100%" src="https://repl.it/@sonylnagale/unit-5-apis-weather-solution1?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals">
|
|
|
</iframe>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="summary" class="level2">
|
|
|
<h2>Summary</h2>
|
|
|
<p>APIs:</p>
|
|
|
<ul>
|
|
|
<li>Handy URLs from which we can get information.</li>
|
|
|
<li>Sometimes require keys.</li>
|
|
|
<li>Usually free.</li>
|
|
|
<li>Call with the <code>requests()</code> module.</li>
|
|
|
</ul>
|
|
|
<p>XML and JSON:</p>
|
|
|
<ul>
|
|
|
<li>Two formats in which APIs might return information to us.</li>
|
|
|
<li>XML is legacy.</li>
|
|
|
<li>JSON looks like a dictionary.</li>
|
|
|
</ul>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="additional-resources" class="level2">
|
|
|
<h2>Additional Resources</h2>
|
|
|
<ul>
|
|
|
<li>Here’s an example of a <a href="https://wptavern.com/ryan-hellyers-aws-nightmare-leaked-access-keys-result-in-a-6000-bill-overnight">stolen key horror story</a>.</li>
|
|
|
<li>The <a href="http://www.programmableweb.com/apis/directory">Programmable Web API Directory</a></li>
|
|
|
<li><a href="https://python.readthedocs.io/en/stable/library/xml.etree.elementtree.html">Element Tree XML</a></li>
|
|
|
</ul>
|
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
<footer><span class='slide-number'></span></footer>
|
|
|
</div>
|
|
|
<script src="../../../../lib/js/head.min.js"></script>
|
|
|
<script src="../../../../js/reveal.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var dependencies = [
|
|
|
{ src: '../../../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
|
|
{ src: '../../../../plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
|
{ src: '../../../../plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
|
{ src: '../../../../plugin/prism/prism.js', async: true, callback: function() { /*hljs.initHighlightingOnLoad();*/ } },
|
|
|
{ src: '../../../../plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }
|
|
|
];
|
|
|
|
|
|
if (Reveal.getQueryHash().instructor === 1) {
|
|
|
dependencies.push({ src: '../../../../plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } });
|
|
|
}
|
|
|
// Full list of configuration options available here:
|
|
|
// https://github.com/hakimel/reveal.js#configuration
|
|
|
Reveal.initialize({
|
|
|
controls: true,
|
|
|
progress: true,
|
|
|
history: true,
|
|
|
center: false,
|
|
|
slideNumber: true,
|
|
|
|
|
|
// available themes are in /css/theme
|
|
|
theme: Reveal.getQueryHash().theme || 'default',
|
|
|
|
|
|
// default/cube/page/concave/zoom/linear/fade/none
|
|
|
transition: Reveal.getQueryHash().transition || 'slide',
|
|
|
|
|
|
// Optional libraries used to extend on reveal.js
|
|
|
dependencies: dependencies
|
|
|
});
|
|
|
|
|
|
if (Reveal.getQueryHash().instructor === 1) {
|
|
|
Reveal.configure(dependencies.push({ src: '../../../../plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }));
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
Reveal.addEventListener('ready', function() {
|
|
|
if (Reveal.getCurrentSlide().classList.contains('separator-subhead')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-subhead.css');
|
|
|
} else if (Reveal.getCurrentSlide().classList.contains('separator')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-title.css')
|
|
|
} else {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga.css');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
Reveal.addEventListener('slidechanged', function(e) {
|
|
|
if (Reveal.getCurrentSlide().classList.contains('separator-subhead')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-subhead.css');
|
|
|
} else if (Reveal.getCurrentSlide().classList.contains('separator')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-title.css')
|
|
|
} else {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga.css');
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
