This repository was archived by the owner on Nov 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathadvanced-ajax.html
More file actions
207 lines (205 loc) · 11.2 KB
/
advanced-ajax.html
File metadata and controls
207 lines (205 loc) · 11.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html>
<head>
<title>Intro to APIs and AJAX</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=BioRhyme:400,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Mono:400,800" rel="stylesheet">
<link rel='stylesheet' type='text/css' href="../css/reset.css" >
<link rel='stylesheet' type='text/css' href="../css/theme.css">
<link rel='stylesheet' type='text/css' href="../css/styles.css" >
<link rel='stylesheet' type='text/css' href="../css/new-styles.css" >
</head>
<body>
<header>
<pre id='ascii-title' style='font-size:2vw; line-height:0.85em; letter-spacing: -0.25em;'>
___ ___
( ) ( )
.---. .-.| | ___ ___ .---. ___ .-. .--. .--. .-.| |
/ .-, \ / \ | ( )( ) / .-, \ ( ) \ / \ / \ / \ |
(__) ; | | .-. | | | | | (__) ; | | .-. . | .-. ; | .-. ; | .-. |
.'` | | | | | | | | | .'` | | | | | | |(___) | | | | | | | |
/ .'| | | | | | | | | | / .'| | | | | | | | | |/ | | | | |
| / | | | | | | | | | | | / | | | | | | | | ___ | ' _.' | | | |
; | ; | | ' | | ' ' ; ' ; | ; | | | | | | '( ) | .'.-. | ' | |
' `-' | ' `-' / \ `' / ' `-' | | | | | ' `-' | ' `-' / ' `-' /
`.__.'_. `.__,' '_.' `.__.'_. (___)(___) `.__,' `.__.' `.__,'
.---. .-. .---. ___ ___
/ .-, \ ( __) / .-, \ ( )( )
(__) ; | (''") (__) ; | | | | |
.'` | | | .'` | \ `' /
/ .'| | | | / .'| | / ,. \
| / | | | | | / | | ' . ; .
; | ; | | | ; | ; | | | | |
' `-' | ___ | | ' `-' | | | | |
`.__.'_. ( )' | `.__.'_. (___)(___)
; `-' '
.__.'</pre>
<h2 class='date'> July 2nd, 2018</h2>
</header>
<article class='container'>
<section id="todo" >
<h1>To Do's:</h1>
<ul>
<li>Administrivia</li>
<li>Quick review</li>
<li>AJAX/API activities</li>
</ul>
</section>
<section>
<h1>Administrivia</h1>
<p>How's the homework coming along? Any questions on that? Unclear on what to do? Need a refresher on timers?</p>
<p>How about APIs/AJAX? Today's lesson will be very activity-heavy, so you'll get to practice
with these new concepts.
</p>
</section>
<section>
<h1>Quick Refresher</h1>
<p>What's an API? Why are they important?</p>
<p>How does AJAX fit into this equation?</p>
<p><abbr title="Asynchronous Javascript And XML">AJAX</abbr> allows us to make requests in real time; in conjunction
with APIs, this essentially means that we can grab data from the web on the fly. There are thousands of APIs, many
of which are publicly available. Some are authenticated using API keys—this usually means that a little extra
data is passed as part of the request to make sure you're not a bot and to keep track of your usage.</p>
<h3>AJAX Usage:</h3>
<pre class="brush: javascript">
// The jQuery Way:
$.ajax({
url: "https://giphy.com/api/[etc]", // What do we want to get?
method: "GET" // or "POST", "PUT", "DELETE"...
}).then(response => {
// Do something with our data if everything went well!
}).;
// The ES6 way:
fetch("http://foaas.com/shakespeare/Fred/Waldo", {
method: "GET",
headers: {
"Accept": "application/json" // Optional parameter. We want JSON back
}
}).then(response => response.json())
.then(data => {
// do a thing with our data
console.log(data);
}).catch(error => { Promise.reject(error); });
/* We catch errors in case our fetch doesn't work
and our promise is broken. Notice that we're using
arrow function syntax instead of writing "function". */</pre>
<hr class="line-break">
<h2>Questions?</h2>
</section>
<section>
<h1>API/AJAX Practice</h1>
<div class="student-activity">
<h2>Student activity!</h2>
<p>Let's check out an application that uses the OpenWeatherMap API.</p>
<p>Open up either <code>bujumbura-easier.html</code> or <code>bujumbura-harder.html</code>
in <code>05-bujumbura</code>. Do the following to get it working:</p>
<ul>
<li>Query the OpenWeatherMap API <a href="http://openweathermap.org/api" target="_blank">(http://openweathermap.org/api)</a>
for the current weather data on Bujumbura, Burundi.</li>
<li>Log the retrieved data from this query to console.</li>
<li>Parse the retrieved data to display wind speed, humidity, and temperature information
into the HTML.</li>
</ul>
<p><span class='note'>Hint:</span> You will need to request an API key from the website.</p>
<p><span class='note'>Bonus:</span> Figure out how to convert the Kelvin
temperature provided into Fahrenheit.</p>
<p>Don't worry if this feels hard. Push yourself!</p>
</div>
<hr class="line-break">
<h2>Bujumbura Overview</h2>
<p>Let's go over this activity.</p>
<p>How would we recycle this code to get the weather in a different city?</p>
<hr class="line-break">
<div class="activity">
<h2>Instructor demo...</h2>
<h3>Movie App Demo</h3>
<p>Today's class will be mainly dedicated to making the following application, which I'll demo for you.</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Movie App JSON Dump</h3>
<p>This time, let's use the OMDb API from last class. I'll demo the finished applciation,
then you get to build it!</p>
<p>Using <code>2-movie-json-dump.html</code> in <code>06-MovieJSONDump</code> as starter code, add functionality such that
clicking "Movie Search" triggers an AJAX call to the OMDb database and the JSON response to be appended onto the page.</p>
<p>If you finish early, begin
reading about the Bands In Town API <a href="https://app.swaggerhub.com/apis/Bandsintown/PublicAPI/3.0.0" target="_blank">
(https://app.swaggerhub.com/apis/Bandsintown/PublicAPI/3.0.0)</a>.
Try to understand how to search for a specific artist.!</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Movie Buttons</h3>
<p>Using either <code>movie-button-layout-easier.html</code> or <code>movie-button-layout-harder.html</code> in <code>07-MovieButtonLayout</code>
as a starting-point, replicate the functionality of the application just demonstrated to you.</p>
<p>Your final code should:</p>
<ul>
<li>Dynamically generate the initial buttons using jQuery</li>
<li>Allow users to create new buttons upon entering text in the textbox and clicking the add button</li>
</ul>
<p>Again, if you finish early, begin reading about the Bands In Town API
<a href="https://app.swaggerhub.com/apis/Bandsintown/PublicAPI/3.0.0"
target="_blank">
(https://app.swaggerhub.com/apis/Bandsintown/PublicAPI/3.0.0)</a>. Try to understand how to search for a specific artist.!</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Log Movie JSON & Click JSON Data Attribute</h3>
<p>
We'll be taking a look at <code>08-LogMovieName</code> and <code>09-ClickJSON</code>.
I'll demonstrate both of these before we begin.
</p>
<p><span class="bold">Log Movie Name:</span> using the starter code provided, create the missing code snippets inside the `alertMovieName` function necessary to capture
the movie name for both the original and new buttons.</p>
<p><span class="bold">Click JSON:</span> using the Starter code provided, create the missing code snippets
inside the <code>displayMovieInfo()</code> function necessary to display JSON data about each movie.</p>
<p><span class="note">Hint:</span> you should use HTML <code>data-</code> attributes.</p>
</div>
</section>
<div class="page-break">
<h1>Break Time!</h1>
</div>
<section>
<h1>Activities, Continued</h1>
<div class="student-activity">
<h2>Student activity!</h2>
<p>Using either <code>working-movie-app-easier.html</code> or <code>working-movie-app-harder.html</code>
in <code>10-WorkingMovieApp</code>, complete the application so that various snippets of information
about your movie are displayed underneath. As a suggestion, display <span class="italic">at least</span>
each of the following:</p>
<ul>
<li>Movie Poster</li>
<li>Rating</li>
<li>Release Date</li>
<li>Plot</li>
</ul>
</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<p>Here's one last activity for the day: we'll be using the Bandsintown API to create an application.</p>
<p>Using the starter code provided in <code>bands-in-town-unsolved.html</code> in <code>11-BandsInTown</code>,
complete the application such that your code will search the Bands In Town API for
the artist specified in the search box.</p>
<p>Bands in Town is a service for finding out when and where bands and artists are
scheduled to tour. Information on how to use query the Bands In Town API can be found at
<a href="https://app.swaggerhub.com/apis/Bandsintown/PublicAPI/3.0.0">
https://app.swaggerhub.com/apis/Bandsintown/PublicAPI/3.0.0</a>. This is a free public API
and you will not need to sign up for anything.</p>
<p><span class="note">Hint:</span> scroll down the API docs and
study the examples. See if you can figure out how to query for an artist's information. You will need to use the <code>/artists/{artistname}
endpoint</code>.</p>
<p><span class="note">Hint:</span> the <code>app_id</code> parameter described in the docs is required,
but can be set to anything you wish.</p>
</div>
</section>
</article>
</body>
<!-- Script to make <pre> tags pretty -->
<script type='text/javascript' src="../js/syntaxhighlighter.js"></script>
<script type='text/javascript' src="https://code.jquery.com/jquery.js"></script>
</html>
</html>