Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,000 --> 00:00:03,295
This course is an excellent introduction to APIs for beginners.
2
00:00:03,295 --> 00:00:06,243
This is an updated version
of what is already one of
3
00:00:06,243 --> 00:00:08,960
the most popular API courses on the Internet.
4
00:00:08,960 --> 00:00:15,306
Craig Dennis is back as the instructor and in my opinion he is one of the best developer educators out there.
5
00:00:15,330 --> 00:00:17,550
- Hello, I'm Craig and I'm a developer.
6
00:00:17,550 --> 00:00:19,380
In this course, we are
going to be exploring
7
00:00:19,380 --> 00:00:21,480
a term that you've
probably heard quite a bit.
8
00:00:21,480 --> 00:00:25,749
That term is API or application
programming interface.
9
00:00:25,749 --> 00:00:28,560
In addition to being able to
recite what it stands for,
10
00:00:28,560 --> 00:00:29,730
when you complete this course,
11
00:00:29,730 --> 00:00:31,668
you'll be able to
discuss what an API does.
12
00:00:31,668 --> 00:00:33,960
You'll understand why they
exist and you'll be able
13
00:00:33,960 --> 00:00:36,600
to list the many benefits
that they provide.
14
00:00:36,600 --> 00:00:38,880
You'll even get some
hands-on experience using
15
00:00:38,880 --> 00:00:41,490
a few popular web APIs,
which will give you
16
00:00:41,490 --> 00:00:44,190
a taste of what all this
excitement is about.
17
00:00:44,190 --> 00:00:46,350
We'll be starting from the very beginning,
18
00:00:46,350 --> 00:00:48,180
so there really isn't too much I'm gonna
19
00:00:48,180 --> 00:00:50,520
be expecting you to know
before starting this course.
20
00:00:50,520 --> 00:00:51,660
I would like to request that
21
00:00:51,660 --> 00:00:53,332
you have a touch of experience with coding
22
00:00:53,332 --> 00:00:56,220
and a wee bit of knowledge about the web.
23
00:00:56,220 --> 00:00:58,320
If you've written any program at all,
24
00:00:58,320 --> 00:01:00,150
even the typical first program,
25
00:01:00,150 --> 00:01:02,460
you know the one where you
write the words, "Hello, world."
26
00:01:02,460 --> 00:01:04,243
If you've done that in
any programming language,
27
00:01:04,243 --> 00:01:07,470
you'll pretty much be
ready for this course.
28
00:01:07,470 --> 00:01:10,410
It will be helpful if you
have a basic understanding
29
00:01:10,410 --> 00:01:13,140
of how the web works with
web servers and browsers,
30
00:01:13,140 --> 00:01:15,600
but don't sweat it,
we'll touch on that too.
31
00:01:15,600 --> 00:01:19,060
Now, if you haven't met these
requirements, please check
32
00:01:19,060 --> 00:01:21,720
the notes attached to this
video for where to get started
33
00:01:21,720 --> 00:01:24,660
with some beginning web
and programming concepts.
34
00:01:24,660 --> 00:01:27,360
That reminds me, you should take some time
35
00:01:27,360 --> 00:01:29,310
to get used to your learning environment.
36
00:01:29,310 --> 00:01:31,980
The notes that I just discussed
are attached to this video
37
00:01:31,980 --> 00:01:34,440
and I'll also drop more
information into that section
38
00:01:34,440 --> 00:01:35,970
to keep you updated on
what might have changed
39
00:01:35,970 --> 00:01:39,690
from my right now to your
right now and I'll do my best
40
00:01:39,690 --> 00:01:41,640
to remind you to look in
there when there's something
41
00:01:41,640 --> 00:01:43,805
I think you just have
to see, but you really
42
00:01:43,805 --> 00:01:46,140
should get in the habit
of checking that area out.
43
00:01:46,140 --> 00:01:48,340
There'll be tons of
juicy information there.
44
00:01:49,852 --> 00:01:54,030
You might be getting a real
bad case of deja vu right now.
45
00:01:54,030 --> 00:01:56,430
This is a refresh of a course from 2019,
46
00:01:56,430 --> 00:01:59,790
which these days seems like
about 30 years ago or something.
47
00:01:59,790 --> 00:02:01,920
If you saw that version, welcome back.
48
00:02:01,920 --> 00:02:04,440
Technology is constantly
evolving and just updating
49
00:02:04,440 --> 00:02:07,440
the notes wasn't cutting
it, so this is version two.
50
00:02:07,440 --> 00:02:08,940
Thanks for all the feedback, by the way,
51
00:02:08,940 --> 00:02:10,920
a lot of yours and your
fellow learner's suggestions
52
00:02:10,920 --> 00:02:13,277
are implemented in this
new updated version.
53
00:02:13,277 --> 00:02:16,260
All that to say, we got you.
54
00:02:16,260 --> 00:02:17,897
These videos have captions,
so if you feel like
55
00:02:17,897 --> 00:02:20,700
you might benefit from having
those on, please use them.
56
00:02:20,700 --> 00:02:22,620
This space is all yours.
57
00:02:22,620 --> 00:02:24,000
If you want me to speak slower,
58
00:02:24,000 --> 00:02:26,820
please use the speed
controllers to slow me down,
59
00:02:26,820 --> 00:02:29,070
and if I'm taking a
long time, speed me up.
60
00:02:29,070 --> 00:02:30,750
I make a pretty good chipmunk.
61
00:02:30,750 --> 00:02:33,390
And last but certainly
not least, take advantage
62
00:02:33,390 --> 00:02:35,970
of the fact that you are
in a video-based course.
63
00:02:35,970 --> 00:02:37,860
If you need me to repeat myself,
64
00:02:37,860 --> 00:02:39,533
use the video controls to rewind me.
65
00:02:39,533 --> 00:02:41,670
If you feel like you need
to take a break to let
66
00:02:41,670 --> 00:02:45,690
something sink in, by all
means, please pause me.
67
00:02:45,690 --> 00:02:47,440
I'll be right here waiting for you.
68
00:02:48,600 --> 00:02:51,630
I know that I've gotten
into some pretty bad
69
00:02:51,630 --> 00:02:53,670
viewing habits with all
this streaming media.
70
00:02:53,670 --> 00:02:55,440
Now, while binging might be a great way
71
00:02:55,440 --> 00:02:58,260
to consume an entire season
of your favorite show,
72
00:02:58,260 --> 00:03:00,660
it's not the best way
to learn something new.
73
00:03:00,660 --> 00:03:03,360
Education isn't meant to be
binged and because of this,
74
00:03:03,360 --> 00:03:06,176
I'll probably remind you
quite a bit to take breaks
75
00:03:06,176 --> 00:03:11,176
and encourage you to let what
you just learned marinate.
76
00:03:11,670 --> 00:03:13,317
All right, let's get to it.
77
00:03:13,317 --> 00:03:15,571
API, those three little letters
78
00:03:15,571 --> 00:03:17,580
generate quite the buzz, don't they?
79
00:03:17,580 --> 00:03:19,860
First, I'd like to take
some time upfront here
80
00:03:19,860 --> 00:03:22,070
and clearly break down what is meant
81
00:03:22,070 --> 00:03:24,780
by application programming interface.
82
00:03:24,780 --> 00:03:27,300
By understanding its purpose
and a touch of its history,
83
00:03:27,300 --> 00:03:30,030
I think you'll start to see
its importance and begin
84
00:03:30,030 --> 00:03:33,240
to understand why this term
keeps popping up in your life.
85
00:03:33,240 --> 00:03:36,810
After we get a good grasp on
the what and the why of APIs,
86
00:03:36,810 --> 00:03:39,390
we'll go and learn how to
explore two existing ones.
87
00:03:39,390 --> 00:03:41,310
We'll get familiar with
several handy tools
88
00:03:41,310 --> 00:03:44,760
that you can use to interact
with web-based APIs.
89
00:03:44,760 --> 00:03:47,220
We'll use those tools to
hit an external web API
90
00:03:47,220 --> 00:03:49,740
to send actual text
messages and we'll get some
91
00:03:49,740 --> 00:03:52,800
inteRESTing data back from a
streaming music service API.
92
00:03:52,800 --> 00:03:55,920
Once we get some practice
using the APIs, we'll use them
93
00:03:55,920 --> 00:03:58,410
in a web application that
you'll actually publish.
94
00:03:58,410 --> 00:04:00,480
The application that we're
gonna be building is going
95
00:04:00,480 --> 00:04:03,930
to receive user submitted
photos via a text message,
96
00:04:03,930 --> 00:04:06,643
and then we'll use an API to
display a collection of all
97
00:04:06,643 --> 00:04:09,750
these photos and you get
to come up with the prompt.
98
00:04:09,750 --> 00:04:13,080
Send me the latest photo
on your phone, dog pics,
99
00:04:13,080 --> 00:04:16,260
please, what's for
dinner, whatever you want.
100
00:04:16,260 --> 00:04:17,268
I can't wait to see what you build
101
00:04:17,268 --> 00:04:20,250
and what your family and
friends submit to it.
102
00:04:20,250 --> 00:04:22,920
We are going to be strictly
using APIs in this course,
103
00:04:22,920 --> 00:04:24,270
we won't be writing our own.
104
00:04:24,270 --> 00:04:26,100
While you most likely are gonna end up
105
00:04:26,100 --> 00:04:28,470
learning some best
practices in API design,
106
00:04:28,470 --> 00:04:30,150
we won't be covering that specifically.
107
00:04:30,150 --> 00:04:31,980
There are many great
courses available that show
108
00:04:31,980 --> 00:04:34,140
the creation thought process,
and I've linked to some
109
00:04:34,140 --> 00:04:36,960
of my faves in the notes
attached to this video.
110
00:04:36,960 --> 00:04:39,143
In my opinion, the best
way to start learning about
111
00:04:39,143 --> 00:04:42,540
any acronym is to focus
on each individual letter.
112
00:04:42,540 --> 00:04:44,940
For API, I think we should start on
113
00:04:44,940 --> 00:04:47,023
that last character, the I, interface.
114
00:04:47,023 --> 00:04:49,140
Let's talk a bit about the interfaces
115
00:04:49,140 --> 00:04:50,390
that you've seen already.
116
00:04:51,420 --> 00:04:53,340
Interfaces are all around us.
117
00:04:53,340 --> 00:04:56,694
For instance, this radio here,
it has a familiar interface.
118
00:04:56,694 --> 00:04:59,970
The interface allows me to do
things like change the volume,
119
00:04:59,970 --> 00:05:02,498
change the station, I
can turn it off and on.
120
00:05:02,498 --> 00:05:05,409
I literally have no
idea how anything inside
121
00:05:05,409 --> 00:05:08,340
this thing works, but still
the interface allows me
122
00:05:08,340 --> 00:05:10,440
to control the way that it
works through the options
123
00:05:10,440 --> 00:05:13,320
that are exposed and that's
pretty great, isn't it?
124
00:05:13,320 --> 00:05:14,520
The magic that is happening is
125
00:05:14,520 --> 00:05:16,530
completely abstracted away from me.
126
00:05:16,530 --> 00:05:18,030
I'm still in control of what has
127
00:05:18,030 --> 00:05:21,180
been determined that I, a user can handle.
128
00:05:21,180 --> 00:05:23,700
Interfaces usually evolve over time,
129
00:05:23,700 --> 00:05:25,860
like an alarm clock radio for example.
130
00:05:25,860 --> 00:05:28,560
It has my familiar volume
and station controls
131
00:05:28,560 --> 00:05:30,417
and it also adds some new features like
132
00:05:30,417 --> 00:05:33,030
changing the time and setting the alarm.
133
00:05:33,030 --> 00:05:36,210
I still have no idea how this
works implementation wise,
134
00:05:36,210 --> 00:05:38,883
but the interface is something
that I can understand.
135
00:05:39,870 --> 00:05:43,350
Usually, and as technology evolves
136
00:05:43,350 --> 00:05:44,940
and new options come into existence,
137
00:05:44,940 --> 00:05:47,670
they make their way into the
new versions of the interface.
138
00:05:47,670 --> 00:05:49,620
Still abstracting away things for us,
139
00:05:49,620 --> 00:05:53,310
but enabling us to be in
control of the new features.
140
00:05:53,310 --> 00:05:56,400
Sometimes these physical
interfaces get so recognizable,
141
00:05:56,400 --> 00:05:58,389
they even make it into GUIs.
142
00:05:58,389 --> 00:05:59,670
Hey, did you hear that?
143
00:05:59,670 --> 00:06:04,319
There it is again, GUI, G-U-I,
graphical user interface.
144
00:06:04,319 --> 00:06:07,080
This is my streaming
music app on my phone.
145
00:06:07,080 --> 00:06:11,040
There's my familiar Play button
in the user interface or UI,
146
00:06:11,040 --> 00:06:14,070
and I know what the Play
button does when I press it,
147
00:06:14,070 --> 00:06:16,707
but I have no idea how it does it
148
00:06:16,707 --> 00:06:19,200
and I'm okay with that
level of abstraction.
149
00:06:19,200 --> 00:06:21,360
What would I do in public
transit without music?
150
00:06:21,360 --> 00:06:24,153
Like, talk to people? Hi, how's it going?
151
00:06:26,850 --> 00:06:28,590
Now, the developer who wrote this
152
00:06:28,590 --> 00:06:30,570
streaming music application, of course,
153
00:06:30,570 --> 00:06:32,160
understands how the Play button works.
154
00:06:32,160 --> 00:06:34,650
She coded the button so
that when it gets clicked,
155
00:06:34,650 --> 00:06:36,510
the music starts playing.
156
00:06:36,510 --> 00:06:38,820
Here's the thing though,
our developer is also
157
00:06:38,820 --> 00:06:40,740
working with quite a
few interfaces that are
158
00:06:40,740 --> 00:06:43,380
abstracting the way some
of the details for her.
159
00:06:43,380 --> 00:06:44,940
For instance, she wrote code
160
00:06:44,940 --> 00:06:47,010
that happens when the button is clicked.
161
00:06:47,010 --> 00:06:49,140
She probably did that
using an event handler
162
00:06:49,140 --> 00:06:51,480
on the button, like onClick.
163
00:06:51,480 --> 00:06:54,120
What she didn't have to do,
however, was write the code
164
00:06:54,120 --> 00:06:57,000
that makes the button interact
and change with the press.
165
00:06:57,000 --> 00:06:58,080
She didn't have to write the code
166
00:06:58,080 --> 00:07:00,120
that makes that familiar clicking noise.
167
00:07:00,120 --> 00:07:01,510
It was already there for her.
168
00:07:01,510 --> 00:07:04,680
Buttons are, in fact, an interface.
169
00:07:04,680 --> 00:07:07,170
They provide the developer
the means of controlling
170
00:07:07,170 --> 00:07:09,060
its interactions while abstracting way how
171
00:07:09,060 --> 00:07:11,430
that actually works, implementation wise.
172
00:07:11,430 --> 00:07:13,697
This button is part of the API
173
00:07:13,697 --> 00:07:15,717
or application programming interface
174
00:07:15,717 --> 00:07:18,360
and it's available from
the application framework
175
00:07:18,360 --> 00:07:20,340
that was used to create the app.
176
00:07:20,340 --> 00:07:22,020
Because most apps need buttons,
177
00:07:22,020 --> 00:07:23,910
this interface has been
created and provided
178
00:07:23,910 --> 00:07:27,810
to our developer or
application programmer to use.
179
00:07:27,810 --> 00:07:30,570
By implementing the button
interface, our developer
180
00:07:30,570 --> 00:07:33,780
was able to make her code run
when the button was clicked.
181
00:07:33,780 --> 00:07:36,420
It's worth noting that
the code probably also
182
00:07:36,420 --> 00:07:39,180
uses a media player API
that is provided with
183
00:07:39,180 --> 00:07:42,510
the operating system of the
device like Android or iOS.
184
00:07:42,510 --> 00:07:46,140
This media player API abstracts
away needing to understand
185
00:07:46,140 --> 00:07:49,470
details of how to send
audio data to hardware.
186
00:07:49,470 --> 00:07:51,240
The developer knows they just want to call
187
00:07:51,240 --> 00:07:54,360
the play method on the media player API.
188
00:07:54,360 --> 00:07:57,660
I suppose too, the song
isn't stored on the device,
189
00:07:57,660 --> 00:08:00,298
it's being streamed over
the network, so a web-based
190
00:08:00,298 --> 00:08:03,711
API call has been made over
the internet to get that data.
191
00:08:03,711 --> 00:08:06,739
It's actually APIs all
the way down to the ones
192
00:08:06,739 --> 00:08:10,320
and zeros providing
abstractions at many levels,
193
00:08:10,320 --> 00:08:11,600
so let's take a look at what all
194
00:08:11,600 --> 00:08:13,710
of these interfaces have in common.
195
00:08:13,710 --> 00:08:17,070
They all define ways for us
to interact or communicate
196
00:08:17,070 --> 00:08:19,710
with an object, whether
that object be physical
197
00:08:19,710 --> 00:08:22,230
or software, and as a
user of the interface,
198
00:08:22,230 --> 00:08:24,570
we don't need to understand
the implementation,
199
00:08:24,570 --> 00:08:26,123
we don't need to know how it works.
200
00:08:26,123 --> 00:08:29,102
We just need to know what
we've been allowed to change
201
00:08:29,102 --> 00:08:33,535
or see, interfaces abstract
away the implementation.
202
00:08:33,535 --> 00:08:36,330
Now, while the UI or user
interface is made for
203
00:08:36,330 --> 00:08:39,060
the user of the
application, the API is made
204
00:08:39,060 --> 00:08:40,470
for the application programmer
205
00:08:40,470 --> 00:08:42,990
to use and extend in their applications.
206
00:08:42,990 --> 00:08:45,984
With the I covered in our API,
207
00:08:45,984 --> 00:08:49,473
let's take a deeper look at
the REST of the API acronym.
208
00:08:50,400 --> 00:08:52,530
An API is a contract of sorts.
209
00:08:52,530 --> 00:08:54,327
It defines how it is expected to be used
210
00:08:54,327 --> 00:08:58,040
and it defines what you can
expect to receive by using it.
211
00:08:58,040 --> 00:09:00,330
Think of it as a set of tools designed
212
00:09:00,330 --> 00:09:03,200
for software developers
like yourself to use.
213
00:09:03,200 --> 00:09:05,776
An API is created to help
make your life easier
214
00:09:05,776 --> 00:09:08,250
by giving you access to
data and by providing you
215
00:09:08,250 --> 00:09:11,130
with an abstraction of the
implementation, you know,
216
00:09:11,130 --> 00:09:14,460
not needing to know how it's
doing, whatever it's doing.
217
00:09:14,460 --> 00:09:17,550
They save you from needing to
create everything yourself,
218
00:09:17,550 --> 00:09:20,100
like when designed well, they
make nearly impossible things
219
00:09:20,100 --> 00:09:22,050
happen with just a few lines of code.
220
00:09:22,050 --> 00:09:23,760
Now you're probably starting to see why
221
00:09:23,760 --> 00:09:25,740
it's important to get
familiar with them, right?
222
00:09:25,740 --> 00:09:28,710
I want to do a quick word
of warning here about some
223
00:09:28,710 --> 00:09:30,990
naming issues that
you'll probably run into.
224
00:09:30,990 --> 00:09:34,230
These days, the term API
is almost always used
225
00:09:34,230 --> 00:09:37,020
as a way to explain web-based APIs.
226
00:09:37,020 --> 00:09:38,910
In fact, it's probably
safe to assume that when
227
00:09:38,910 --> 00:09:41,220
you hear API in the wild, it's most likely
228
00:09:41,220 --> 00:09:43,710
that people are talking
about a web-based API.
229
00:09:43,710 --> 00:09:45,720
We'll explore those here in a few.
230
00:09:45,720 --> 00:09:48,330
However, if we focus on all types of APIs
231
00:09:48,330 --> 00:09:50,190
instead of just the web-based subset,
232
00:09:50,190 --> 00:09:52,710
we'll get a better look
into why web-based APIs are
233
00:09:52,710 --> 00:09:55,110
so popular, so hang tight,
we're getting there.
234
00:09:55,110 --> 00:09:57,575
APIs are everywhere in
your software journey just
235
00:09:57,575 --> 00:10:00,300
about everywhere you look,
your programming language,
236
00:10:00,300 --> 00:10:03,015
whichever one that might
be, provides many APIs.
237
00:10:03,015 --> 00:10:06,480
Let's take a look at one that
is common in all of them.
238
00:10:06,480 --> 00:10:09,150
They all provide some way
of working with strings,
239
00:10:09,150 --> 00:10:11,070
you know, like a series of characters.
240
00:10:11,070 --> 00:10:12,840
Wanna make your text all uppercase?
241
00:10:12,840 --> 00:10:15,780
Just call the API method and voila.
242
00:10:15,780 --> 00:10:17,760
You could probably create
the uppercase string all
243
00:10:17,760 --> 00:10:20,730
by yourself by doing some
sort of low level bit math
244
00:10:20,730 --> 00:10:23,640
on each character, but you don't need to
245
00:10:23,640 --> 00:10:25,710
because your programming
language has abstracted away
246
00:10:25,710 --> 00:10:29,070
that for you and provided
a handy string API.
247
00:10:29,070 --> 00:10:30,120
It exists because this is
248
00:10:30,120 --> 00:10:33,270
a common enough problem
that developers run into.
249
00:10:33,270 --> 00:10:36,060
Because these programming
language specifications are
250
00:10:36,060 --> 00:10:39,300
just interfaces, different
operating systems can supply
251
00:10:39,300 --> 00:10:41,190
their own implementation so that the code
252
00:10:41,190 --> 00:10:43,500
works properly in their environment.
253
00:10:43,500 --> 00:10:45,242
I think an easy way of
picturing this is to think
254
00:10:45,242 --> 00:10:47,190
about how different operating systems
255
00:10:47,190 --> 00:10:50,340
like Windows or Mac OS
maintain their files.
256
00:10:50,340 --> 00:10:53,280
They're totally different,
yet your programming language
257
00:10:53,280 --> 00:10:56,370
provides a single API for
working with the file system.
258
00:10:56,370 --> 00:10:58,020
You can write one script
259
00:10:58,020 --> 00:11:00,900
and it works both in Mac and Windows.
260
00:11:00,900 --> 00:11:02,460
It's the implementation that takes care
261
00:11:02,460 --> 00:11:05,160
of all the details for
you, pretty cool, right?
262
00:11:05,160 --> 00:11:07,080
Definitely something to be thankful for.
263
00:11:07,080 --> 00:11:09,630
It makes our lives so much
easier not having to worry
264
00:11:09,630 --> 00:11:12,688
about what operating system is
being used and the importance
265
00:11:12,688 --> 00:11:15,810
of an API tool language
cannot be understated.
266
00:11:15,810 --> 00:11:18,330
There have been some
fascinating legal cases where
267
00:11:18,330 --> 00:11:20,520
it's been questioned if
the language API itself,
268
00:11:20,520 --> 00:11:23,391
again, not the implementation
can be copyrighted,
269
00:11:23,391 --> 00:11:25,500
check out the notes for more on that.
270
00:11:25,500 --> 00:11:27,870
Along similar lines, there
are different web browsers,
271
00:11:27,870 --> 00:11:29,460
you know, like Google Chrome,
272
00:11:29,460 --> 00:11:32,430
Microsoft Edge, Safari, Firefox, Brave.
273
00:11:32,430 --> 00:11:34,440
Now, you might not have
pondered this before,
274
00:11:34,440 --> 00:11:36,480
but isn't it amazing
that you can write code
275
00:11:36,480 --> 00:11:38,896
for the web and it will
work in any of 'em?
276
00:11:38,896 --> 00:11:41,712
This works because
there's a set of web APIs
277
00:11:41,712 --> 00:11:43,800
that web browsers all must implement
278
00:11:43,800 --> 00:11:46,530
in order to make that
magic happen for you.
279
00:11:46,530 --> 00:11:49,020
We are standing on the
shoulders of giants, folks,
280
00:11:49,020 --> 00:11:51,150
and we really should thank
those giants more often.
281
00:11:51,150 --> 00:11:53,370
There are authors and
maintainers of libraries
282
00:11:53,370 --> 00:11:55,800
that package up code to
solve common problems so
283
00:11:55,800 --> 00:11:57,870
that you don't need to do it yourself.
284
00:11:57,870 --> 00:12:00,450
For instance, do you know
how to programmatically
285
00:12:00,450 --> 00:12:01,975
make a photo black and white?
286
00:12:01,975 --> 00:12:04,350
Me neither, but I can download and import
287
00:12:04,350 --> 00:12:07,950
an image package into my
application and suddenly I can.
288
00:12:07,950 --> 00:12:10,320
I just call a method and boom,
289
00:12:10,320 --> 00:12:12,210
I wish real life skills worked this way.
290
00:12:12,210 --> 00:12:13,290
I'd import dancing so I could
291
00:12:13,290 --> 00:12:16,050
be more fun at weddings, cha cha cha.
292
00:12:16,050 --> 00:12:18,690
Frameworks provide an API
that allow you to extend
293
00:12:18,690 --> 00:12:20,670
what has been provided
to make it your own.
294
00:12:20,670 --> 00:12:23,310
Like for example, most web
frameworks provide you with
295
00:12:23,310 --> 00:12:26,580
the ability to add a new
route to your web application.
296
00:12:26,580 --> 00:12:28,260
It allows you to write out dynamic data
297
00:12:28,260 --> 00:12:30,689
to a template that you
specified, and you do all
298
00:12:30,689 --> 00:12:33,720
of this with just a
handful of lines of code.
299
00:12:33,720 --> 00:12:36,270
You don't need to understand
how it's doing things,
300
00:12:36,270 --> 00:12:39,030
but you do need to know how
to write an implementation
301
00:12:39,030 --> 00:12:40,980
to what the framework is expecting.
302
00:12:40,980 --> 00:12:44,040
In this case, you're using
the API, the contract,
303
00:12:44,040 --> 00:12:47,310
to write a valid implementation
that meets the requirements.
304
00:12:47,310 --> 00:12:49,170
Now, all these APIs that
we just talked about,
305
00:12:49,170 --> 00:12:52,350
they're local to our code base,
they exist within our code.
306
00:12:52,350 --> 00:12:54,613
We use them to avoid recreating the wheel.
307
00:12:54,613 --> 00:12:57,638
That is to say they assist
us in accomplishing tasks
308
00:12:57,638 --> 00:13:00,420
that we need to perform
by abstracting away
309
00:13:00,420 --> 00:13:02,280
a ton of the work for us, the stuff that
310
00:13:02,280 --> 00:13:04,200
we developers shouldn't be worrying about.
311
00:13:04,200 --> 00:13:06,510
We should be focusing on the
business problem at hand,
312
00:13:06,510 --> 00:13:09,360
and that means a big part
of your job is figuring out
313
00:13:09,360 --> 00:13:11,762
how to leverage these
APIs to your advantage.
314
00:13:11,762 --> 00:13:13,701
Now, I think this is an excellent time
315
00:13:13,701 --> 00:13:15,840
for you to take a break.
316
00:13:15,840 --> 00:13:17,490
I just gave you a lot to think about
317
00:13:17,490 --> 00:13:19,840
and I'd like you to take
some time and breathe.
318
00:13:20,700 --> 00:13:23,310
Why don't you jot down some
APIs that you've used today?
319
00:13:23,310 --> 00:13:24,630
Even if you weren't coding,
320
00:13:24,630 --> 00:13:26,460
I know that you've seen some in action.
321
00:13:26,460 --> 00:13:29,580
If you're having a hard
time thinking of some,
322
00:13:29,580 --> 00:13:30,930
I'll give you a hint.
323
00:13:30,930 --> 00:13:34,593
You're watching a video right
now inside of a web browser.
324
00:13:35,430 --> 00:13:38,643
When we return, we'll explore
the concept of remote APIs,
325
00:13:38,643 --> 00:13:41,400
ones that aren't executing
locally in our code base
326
00:13:41,400 --> 00:13:44,245
and why that is such a powerful concept.
327
00:13:44,245 --> 00:13:46,912
(upbeat music)
328
00:13:59,700 --> 00:14:02,400
It took me a while to
find this remote control.
329
00:14:02,400 --> 00:14:04,830
It was in the couch.
It's always on the couch.
330
00:14:04,830 --> 00:14:07,710
Anyways, this remote has
an interface on it, right?
331
00:14:07,710 --> 00:14:10,710
There's a Power button and when
I press the Channel button,
332
00:14:10,710 --> 00:14:12,600
it changes the channel, when
I press the Volume button,
333
00:14:12,600 --> 00:14:16,440
it sends the request to my
radio and the volume changes
334
00:14:16,440 --> 00:14:18,090
as if I turned the volume
up using the interface on
335
00:14:18,090 --> 00:14:21,750
the device itself, and we
know why that's important.
336
00:14:21,750 --> 00:14:23,610
I want to remotely control my device.
337
00:14:23,610 --> 00:14:25,496
I don't want to get up from my chair.
338
00:14:25,496 --> 00:14:28,080
There are of course, more
or less lazy reasons as
339
00:14:28,080 --> 00:14:31,200
to why we'd want to
remotely control objects.
340
00:14:31,200 --> 00:14:33,810
This cute little robot, for
instance, has a remote API.
341
00:14:33,810 --> 00:14:35,970
You can send commands
to it and it responds
342
00:14:35,970 --> 00:14:38,340
and it even sends back sensor information.
343
00:14:38,340 --> 00:14:41,820
These traffic signs can
change based on an API call.
344
00:14:41,820 --> 00:14:43,470
This drone here is remotely controlled
345
00:14:43,470 --> 00:14:45,151
by an app on my phone, see?
346
00:14:45,151 --> 00:14:48,780
(drone whirring and crashing)
347
00:14:48,780 --> 00:14:51,312
And it's not just physical objects
348
00:14:51,312 --> 00:14:53,610
that benefit from remote APIs.
349
00:14:53,610 --> 00:14:56,040
Oftentimes we don't have
space on our local machines
350
00:14:56,040 --> 00:14:58,500
for all the data that's
available, like for example,
351
00:14:58,500 --> 00:14:59,970
have you ever used one of those apps
352
00:14:59,970 --> 00:15:02,310
that helps you figure
out what song is playing?
353
00:15:02,310 --> 00:15:04,560
You send up a snippet of a
song that you heard playing
354
00:15:04,560 --> 00:15:06,660
at a grocery store using your microphone,
355
00:15:06,660 --> 00:15:09,270
and it sends back exactly what song it is.
356
00:15:09,270 --> 00:15:10,380
It's usually Phil Collins.
357
00:15:10,380 --> 00:15:11,850
It turns out that both grocery stores
358
00:15:11,850 --> 00:15:14,220
and yours truly love Phil Collins.
359
00:15:14,220 --> 00:15:16,050
You don't have room for all the songs in
360
00:15:16,050 --> 00:15:18,450
the world on your phone
and with this remote API,
361
00:15:18,450 --> 00:15:20,250
you don't need to have all of them.
362
00:15:20,250 --> 00:15:22,080
It does all the searching and processing
363
00:15:22,080 --> 00:15:24,690
and it's surprisingly quick.
364
00:15:24,690 --> 00:15:26,612
How can it possibly do that?
365
00:15:26,612 --> 00:15:29,850
I don't know, but I love
the interface. It's so fast.
366
00:15:29,850 --> 00:15:31,440
Ooh, that's another benefit
367
00:15:31,440 --> 00:15:34,530
of remote APIs, computational power.
368
00:15:34,530 --> 00:15:37,650
Because an API removes the
limitations of your local device,
369
00:15:37,650 --> 00:15:41,100
you can gain access to seemingly
infinite amounts of power.
370
00:15:41,100 --> 00:15:44,640
A good example of this is the
AR app of Google Translate.
371
00:15:44,640 --> 00:15:46,260
You can use the camera on your phone
372
00:15:46,260 --> 00:15:49,410
and in near real time it's
able to translate directly
373
00:15:49,410 --> 00:15:51,930
to your screen, like instantaneously.
374
00:15:51,930 --> 00:15:53,460
It's using a ton of processing power
375
00:15:53,460 --> 00:15:55,470
to make that magic happen
and that processing
376
00:15:55,470 --> 00:15:58,830
is happening elsewhere, "en la Nube."
377
00:15:58,830 --> 00:16:01,313
It took quite a bit of experimentation
378
00:16:01,313 --> 00:16:04,133
and some evolution of
ideas, but over time,
379
00:16:04,133 --> 00:16:07,950
we finally turned this remote
API dream into a reality.
380
00:16:07,950 --> 00:16:09,720
Now, I'm gonna drop some history
into the teacher's notes,
381
00:16:09,720 --> 00:16:12,060
but I just want you to
know that the struggle
382
00:16:12,060 --> 00:16:16,380
to achieve this concept of
remote APIs was very real.
383
00:16:16,380 --> 00:16:17,731
Now, most of the problem was that
384
00:16:17,731 --> 00:16:20,250
there wasn't a standard
that everyone loved.
385
00:16:20,250 --> 00:16:21,960
Things were pretty clunky for a while as
386
00:16:21,960 --> 00:16:25,740
these ideas were sussed
out, but then it happened.
387
00:16:25,740 --> 00:16:28,803
A new architectural style
appeared that was clear
388
00:16:28,803 --> 00:16:31,110
and allowed us developers to interact
389
00:16:31,110 --> 00:16:32,798
with specific resources over the web
390
00:16:32,798 --> 00:16:36,030
and it quite literally changed everything.
391
00:16:36,030 --> 00:16:37,950
This style rapidly emerged as a winner
392
00:16:37,950 --> 00:16:40,470
and just about everyone began offering
393
00:16:40,470 --> 00:16:43,380
and consuming external
APIs over the internet.
394
00:16:43,380 --> 00:16:45,180
Now, what I'm talking about here is REST,
395
00:16:45,180 --> 00:16:47,250
or representational state transfer.
396
00:16:47,250 --> 00:16:49,320
It was the approach that
we needed and honestly,
397
00:16:49,320 --> 00:16:51,750
it's the abstraction that
we developers deserved.
398
00:16:51,750 --> 00:16:55,020
Like we talked about already,
the popularity of REST spread
399
00:16:55,020 --> 00:16:59,070
so rapidly that it nearly
completely overtook the term API.
400
00:16:59,070 --> 00:17:02,231
It's like how we use the
word Xerox to mean photocopy,
401
00:17:02,231 --> 00:17:05,400
even though Xerox is just
a brand of photocopier.
402
00:17:05,400 --> 00:17:09,270
Xerox does other stuff too, I think.
403
00:17:09,270 --> 00:17:11,310
That's how pervasive REST is.
404
00:17:11,310 --> 00:17:14,730
REST is for sure not the end
all, be all of remote APIs.
405
00:17:14,730 --> 00:17:16,738
There are definitely some limitations
406
00:17:16,738 --> 00:17:18,540
which we'll discuss here in a bit.
407
00:17:18,540 --> 00:17:20,370
Technology's ever evolving and of course
408
00:17:20,370 --> 00:17:22,050
there's movements that are still advancing
409
00:17:22,050 --> 00:17:24,341
the concept of the best remote APIs.
410
00:17:24,341 --> 00:17:27,270
Some terms you might even
have heard, like GraphQL,
411
00:17:27,270 --> 00:17:29,100
more on this in the teacher's notes.
412
00:17:29,100 --> 00:17:31,500
Now, for the rest of this
course, we are going to do
413
00:17:31,500 --> 00:17:34,962
a deep dive into APIs that are
written using the REST style.
414
00:17:34,962 --> 00:17:38,160
When APIs embrace the style
and constraints of REST,
415
00:17:38,160 --> 00:17:41,370
they are said to be RESTful, cute, right?
416
00:17:41,370 --> 00:17:43,020
If you feel like you need a little rest,
417
00:17:43,020 --> 00:17:45,360
go ahead and pause me
before we do a deeper dive
418
00:17:45,360 --> 00:17:47,700
into what it means to be RESTful.
419
00:17:47,700 --> 00:17:50,760
Sorry, that was a bad and obvious joke,
420
00:17:50,760 --> 00:17:52,740
but as a developer you
kind of have to make it.
421
00:17:52,740 --> 00:17:54,340
You don't really have an option.
422
00:17:55,350 --> 00:17:57,540
Because REST sits on
top of web technologies
423
00:17:57,540 --> 00:17:59,581
like a really nice hat, we should probably
424
00:17:59,581 --> 00:18:03,421
do a whirlwind refresher
of how the web works.
425
00:18:03,421 --> 00:18:06,088
(upbeat music)
426
00:18:19,050 --> 00:18:20,400
It might have been a while since
427
00:18:20,400 --> 00:18:22,020
you thought about how the web works.
428
00:18:22,020 --> 00:18:24,240
There are a smattering
of terms that I'd like
429
00:18:24,240 --> 00:18:26,660
to reload into your working memory before
430
00:18:26,660 --> 00:18:29,310
we talk more about how REST uses them.
431
00:18:29,310 --> 00:18:33,330
So let's use the web, I've
got my computer here and on it
432
00:18:33,330 --> 00:18:36,716
is an internet browser,
the browser is a web client
433
00:18:36,716 --> 00:18:39,960
and I'm going to use it
to connect to a server.
434
00:18:39,960 --> 00:18:41,130
I'm going to do this by putting
435
00:18:41,130 --> 00:18:43,230
a location in the address bar,
436
00:18:43,230 --> 00:18:47,340
a universal resource
locator or URL to be exact.
437
00:18:47,340 --> 00:18:49,290
You might also hear this referred to by
438
00:18:49,290 --> 00:18:53,433
its superset term URI,
universal Resource Identifier.
439
00:18:54,270 --> 00:18:57,480
Now our URL here has a scheme portion
440
00:18:57,480 --> 00:19:00,210
and this one happens to be HTTP.
441
00:19:00,210 --> 00:19:03,660
HTTP stands for hypertext
transfer protocol.
442
00:19:03,660 --> 00:19:05,370
Let's break that down a bit.
443
00:19:05,370 --> 00:19:07,560
Let's grab that last part, protocol.
444
00:19:07,560 --> 00:19:10,860
A protocol is also often
likened to a contract.
445
00:19:10,860 --> 00:19:12,600
It's a little lower level than an API,
446
00:19:12,600 --> 00:19:13,908
but it's similar in concept.
447
00:19:13,908 --> 00:19:15,930
You can think of it as defining
448
00:19:15,930 --> 00:19:18,360
the expectations of how to communicate.
449
00:19:18,360 --> 00:19:20,490
Like an example that I think really sticks
450
00:19:20,490 --> 00:19:22,066
with me is if you've ever been to a rally
451
00:19:22,066 --> 00:19:23,730
and someone does one of those chants where
452
00:19:23,730 --> 00:19:26,499
they're like, "When I
say 'Fu,' you say "Bar."
453
00:19:26,499 --> 00:19:30,240
Fu, bar, one of those. Here, let's do one.
454
00:19:30,240 --> 00:19:34,950
When I say HTT, you say P, HTT, HTT.
455
00:19:34,950 --> 00:19:38,670
Oh, I just realized I might
have made you yell "P" out loud.
456
00:19:38,670 --> 00:19:41,340
Hope you aren't in a coffee shop. Awkward.
457
00:19:41,340 --> 00:19:45,270
Anyways, we, you and I just
set up a real quick protocol.
458
00:19:45,270 --> 00:19:47,660
I told you how to respond
to my specific request
459
00:19:47,660 --> 00:19:50,760
and you would've been breaking
or agreed upon protocol
460
00:19:50,760 --> 00:19:54,480
if you yelled anything
else but P, so the browser
461
00:19:54,480 --> 00:19:58,260
creates an HTTP request for
you, along with the URI,
462
00:19:58,260 --> 00:20:01,860
it also specifies a particular HTTP verb.
463
00:20:01,860 --> 00:20:04,943
In this case, it is using
the get verb, which is used
464
00:20:04,943 --> 00:20:08,280
to clarify that this request
will only receive data.
465
00:20:08,280 --> 00:20:10,530
That is, it won't be making any changes.
466
00:20:10,530 --> 00:20:12,270
The server receives the request
467
00:20:12,270 --> 00:20:14,370
that was transferred from the client.
468
00:20:14,370 --> 00:20:15,900
There's that second T.
469
00:20:15,900 --> 00:20:18,300
The server then does the
work that it needs to do.
470
00:20:18,300 --> 00:20:20,520
Finally, it generates
the resulting webpage
471
00:20:20,520 --> 00:20:22,740
and sends back a response to the client,
472
00:20:22,740 --> 00:20:24,330
my browser, in this case.
473
00:20:24,330 --> 00:20:27,180
The most important part of
the response is the body.
474
00:20:27,180 --> 00:20:28,530
For a webpage, that contains
475
00:20:28,530 --> 00:20:31,258
the HTML, hypertext markup language,
476
00:20:31,258 --> 00:20:34,860
which gives us the remaining
parts, the HT of our acronym.
477
00:20:34,860 --> 00:20:37,590
Hypertext is text that
can link to other texts.
478
00:20:37,590 --> 00:20:40,770
In HTML, we perform that
linking with anchor tags,
479
00:20:40,770 --> 00:20:43,830
so with that response, the
browser renders the page.
480
00:20:43,830 --> 00:20:45,150
When one of those links are clicked,
481
00:20:45,150 --> 00:20:48,150
they kick off a brand new HTTP get request
482
00:20:48,150 --> 00:20:51,420
and the process repeats
itself over and over.
483
00:20:51,420 --> 00:20:54,210
In between those clicks
though, the protocol's done,
484
00:20:54,210 --> 00:20:57,090
we've made the request,
we got the response.
485
00:20:57,090 --> 00:20:58,980
HTTP, as it was originally designed,
486
00:20:58,980 --> 00:21:00,870
is a stateless protocol.
487
00:21:00,870 --> 00:21:03,889
Once that request receives
a response, it's all done.
488
00:21:03,889 --> 00:21:06,600
If you wanna keep some sort of
state, your client will have
489
00:21:06,600 --> 00:21:10,680
to manage that itself and send
it up with each new request.
490
00:21:10,680 --> 00:21:13,260
Check out the notes for more on this.
491
00:21:13,260 --> 00:21:16,830
There are more http verbs,
also known as request methods
492
00:21:16,830 --> 00:21:19,590
besides get, most common
scenario you see is when you
493
00:21:19,590 --> 00:21:22,560
encounter a form that is used
to take information from you.
494
00:21:22,560 --> 00:21:25,504
Typically you'll see the
verb post used to explain
495
00:21:25,504 --> 00:21:29,280
that you are submitting or
posting data to the server.
496
00:21:29,280 --> 00:21:31,890
Okay, so our protocol
that's used to transfer
497
00:21:31,890 --> 00:21:33,780
this hypertext is admittedly a little
498
00:21:33,780 --> 00:21:36,390
more complex than our rally chant was.
499
00:21:36,390 --> 00:21:38,580
There's quite a bit of
important information in there
500
00:21:38,580 --> 00:21:41,550
that is included in the
request and the response.
501
00:21:41,550 --> 00:21:43,947
You've probably seen query
string parameters in URLs
502
00:21:43,947 --> 00:21:45,990
and you know the stuff
after the question mark?
503
00:21:45,990 --> 00:21:49,020
This is one way to pass
information about the request.
504
00:21:49,020 --> 00:21:51,570
Another common way this
information is passed around
505
00:21:51,570 --> 00:21:54,570
is through specific key and
value pairs called headers.
506
00:21:54,570 --> 00:21:57,216
Both requests and responses have headers
507
00:21:57,216 --> 00:21:59,460
and they're used to
help further communicate
508
00:21:59,460 --> 00:22:02,782
what is wanted as well as
what has been sent back.
509
00:22:02,782 --> 00:22:05,406
Some of the popular request
headers allow you to specify
510
00:22:05,406 --> 00:22:07,920
information about the
content that you expect back,
511
00:22:07,920 --> 00:22:10,105
like the language or the type of content.
512
00:22:10,105 --> 00:22:12,600
You can also state that you want the page
513
00:22:12,600 --> 00:22:14,610
if it has changed since a certain time.
514
00:22:14,610 --> 00:22:16,680
This technique allows for caching,
515
00:22:16,680 --> 00:22:17,970
which is a powerful concept.
516
00:22:17,970 --> 00:22:19,320
Why get the whole page if you already
517
00:22:19,320 --> 00:22:21,420
have it in your local cache?
518
00:22:21,420 --> 00:22:23,150
You can embed authentication information
519
00:22:23,150 --> 00:22:24,740
in each request using a header.
520
00:22:24,740 --> 00:22:26,520
In this way, you're essentially keeping
521
00:22:26,520 --> 00:22:28,635
your client logged in across requests.
522
00:22:28,635 --> 00:22:30,900
This response also contains headers.
523
00:22:30,900 --> 00:22:33,510
A super important one is the status code.
524
00:22:33,510 --> 00:22:35,730
This lets you know what
happened on the server side
525
00:22:35,730 --> 00:22:38,430
and can convey things
like missing documents.
526
00:22:38,430 --> 00:22:41,161
I'm sure you've seen the
old 404 or maybe the page
527
00:22:41,161 --> 00:22:45,750
has moved, but hopefully
everything is a 200 OK.
528
00:22:45,750 --> 00:22:47,370
It can also explain the content type,
529
00:22:47,370 --> 00:22:50,853
how large the data returned
is, and many more things.
530
00:22:51,720 --> 00:22:53,187
Okay, got it?
531
00:22:53,187 --> 00:22:56,190
Are you feeling good about
that little whirlwind tour?
532
00:22:56,190 --> 00:22:58,500
Remember, feel free to
make me repeat myself
533
00:22:58,500 --> 00:23:00,750
if that was too much, I totally get it.
534
00:23:00,750 --> 00:23:03,108
That was a lot of information.
535
00:23:03,108 --> 00:23:05,070
It's important to have
a basic understanding
536
00:23:05,070 --> 00:23:07,350
of these things because
REST sits on top of them.
537
00:23:07,350 --> 00:23:09,180
It uses the concepts that
were introduced with the web
538
00:23:09,180 --> 00:23:13,080
to expose resources that can
be accessed and manipulated.
539
00:23:13,080 --> 00:23:15,210
Let's take a look at
how the RESTful approach
540
00:23:15,210 --> 00:23:17,269
takes advantage of the web and its tooling
541
00:23:17,269 --> 00:23:19,773
for your benefit, profit.
542
00:23:21,210 --> 00:23:24,660
REST stands for
representational state transfer.
543
00:23:24,660 --> 00:23:26,880
APIs that meet the REST architectural
544
00:23:26,880 --> 00:23:30,000
style constraints are
considered to be RESTful.
545
00:23:30,000 --> 00:23:32,880
Now, a typical way to
teach about RESTful APIs is
546
00:23:32,880 --> 00:23:35,880
to cover the constraints
that define it all upfront.
547
00:23:35,880 --> 00:23:38,160
Now, I don't know about
you, but personally I find
548
00:23:38,160 --> 00:23:40,770
approaching learning that
way pretty overwhelming,
549
00:23:40,770 --> 00:23:41,730
especially from the beginning.
550
00:23:41,730 --> 00:23:44,010
I mean, we haven't even
looked at an API yet.
551
00:23:44,010 --> 00:23:46,470
On top of that, most of the REST APIs
552
00:23:46,470 --> 00:23:49,170
that you'll use will meet
all of these constraints.
553
00:23:49,170 --> 00:23:50,539
So here's the thing.
554
00:23:50,539 --> 00:23:53,277
I promise that we'll go
over all the constraints,
555
00:23:53,277 --> 00:23:55,260
but let's do it on our own time,
556
00:23:55,260 --> 00:23:57,810
like don't learn 'em
all right this instant.
557
00:23:57,810 --> 00:23:59,580
We could even make it a fun journey,
558
00:23:59,580 --> 00:24:02,640
like a RESTful constraint scavenger hunt,
559
00:24:02,640 --> 00:24:06,090
complete with prizes,
avoid where prohibited.
560
00:24:06,090 --> 00:24:09,390
Here are the guiding
architectural constraints required
561
00:24:09,390 --> 00:24:11,820
for an API to be considered RESTful.
562
00:24:11,820 --> 00:24:13,950
We'll check them off when we discuss them
563
00:24:13,950 --> 00:24:16,800
and then we'll loop back once
more at the end to review.
564
00:24:16,800 --> 00:24:20,276
Gotta collect them all, sound fun? Good.
565
00:24:20,276 --> 00:24:23,670
Let's get started talking
about how REST API sits on top
566
00:24:23,670 --> 00:24:27,660
of web technology, like a
little hat, much like the web,
567
00:24:27,660 --> 00:24:30,150
the client makes a request to a server.
568
00:24:30,150 --> 00:24:32,220
The client in this case is typically going
569
00:24:32,220 --> 00:24:34,830
to be your program and
you'll probably be using
570
00:24:34,830 --> 00:24:38,184
some sort of library to create
the request to the server.
571
00:24:38,184 --> 00:24:40,830
The protocol used, you guessed it,
572
00:24:40,830 --> 00:24:43,410
it's HTTP and it's stateless.
573
00:24:43,410 --> 00:24:45,270
The server won't remember anything
574
00:24:45,270 --> 00:24:46,680
about the particular client.
575
00:24:46,680 --> 00:24:49,590
If you wanna maintain state
like your login details,
576
00:24:49,590 --> 00:24:52,290
you must send it with
each and every request.
577
00:24:52,290 --> 00:24:54,840
You'll do this using
headers and just like that,
578
00:24:54,840 --> 00:24:57,420
we talked about two of
our REST constraints,
579
00:24:57,420 --> 00:24:59,820
client server architecture and stateless.
580
00:24:59,820 --> 00:25:03,510
You got two knocked off
already. You're on a roll.
581
00:25:03,510 --> 00:25:05,340
Now, we should probably talk about
582
00:25:05,340 --> 00:25:08,329
what that request was requesting, right?
583
00:25:08,329 --> 00:25:10,140
Well, it most certainly was
584
00:25:10,140 --> 00:25:13,650
requesting information about a resource.
585
00:25:13,650 --> 00:25:17,220
Now a resource is a little
abstract and that's intentional.
586
00:25:17,220 --> 00:25:20,250
It's the R in the URL or URI.
587
00:25:20,250 --> 00:25:23,583
We use the term resource
to reference an object.
588
00:25:24,450 --> 00:25:26,790
Also happens to be pretty abstract, right?
589
00:25:26,790 --> 00:25:28,500
And this is because we can use resources
590
00:25:28,500 --> 00:25:30,840
to describe just about
anything that we build.
591
00:25:30,840 --> 00:25:34,410
For instance, let's imagine
an e-book store website.
592
00:25:34,410 --> 00:25:38,310
On the homepage, there's a list
or collection of new books.
593
00:25:38,310 --> 00:25:40,830
Each of these books is a resource.
594
00:25:40,830 --> 00:25:43,740
We click in to take a closer
look at that book resource
595
00:25:43,740 --> 00:25:47,370
and we see a link to the author,
which is also a resource.
596
00:25:47,370 --> 00:25:49,320
We click into the author
resource and we see
597
00:25:49,320 --> 00:25:51,870
a collection of all the
other books they've written.
598
00:25:51,870 --> 00:25:53,940
Maybe we even see a group of fans, again,
599
00:25:53,940 --> 00:25:57,630
another collection, and each
of those fans are a resource.
600
00:25:57,630 --> 00:25:59,850
Clicking into a fan
resource, we see a collection
601
00:25:59,850 --> 00:26:01,800
of their favorite authors and books.
602
00:26:01,800 --> 00:26:06,240
Everything is a resource.
Let's change gears.
603
00:26:06,240 --> 00:26:09,000
How about an image sharing
application on your phone?
604
00:26:09,000 --> 00:26:12,540
So we have user resources
and those users post photos,
605
00:26:12,540 --> 00:26:15,900
which are resources, and
those photos can be loved.
606
00:26:15,900 --> 00:26:18,000
So there's a lover resource,
607
00:26:18,000 --> 00:26:19,530
maybe there's an album
that could be created.
608
00:26:19,530 --> 00:26:21,900
There's an album resource
that contains photos
609
00:26:21,900 --> 00:26:25,198
and albums have a collection
of contributor resources.
610
00:26:25,198 --> 00:26:28,230
Turns out almost everything
we ever want to build
611
00:26:28,230 --> 00:26:30,993
can be expressed in terms of
resources and collections.
612
00:26:31,890 --> 00:26:34,010
Most of what we want our
applications to be able to do
613
00:26:34,010 --> 00:26:36,406
to the resources can be
expressed through the
614
00:26:36,406 --> 00:26:40,260
unfortunate sounding acronym
CRUD, and that stands
615
00:26:40,260 --> 00:26:43,200
for creating, reading,
updating and deleting.
616
00:26:43,200 --> 00:26:45,600
Now, as a user of the e-book site,
617
00:26:45,600 --> 00:26:49,473
all we did was a bunch of
reading, no pun intended.
618
00:26:50,760 --> 00:26:52,740
I actually did intend that one.
619
00:26:52,740 --> 00:26:54,600
We were reading, right?
620
00:26:54,600 --> 00:26:57,060
Just getting information
to display it like
621
00:26:57,060 --> 00:27:00,630
we retrieved the author
page, we made a read request.
622
00:27:00,630 --> 00:27:02,787
The web browser used a get request
623
00:27:02,787 --> 00:27:05,010
to the specific author page.
624
00:27:05,010 --> 00:27:07,860
The RESTful API follows the same logic,
625
00:27:07,860 --> 00:27:10,829
your program sends a get request to a URI.
626
00:27:10,829 --> 00:27:12,780
Then the server responds with data
627
00:27:12,780 --> 00:27:14,790
and of course all the HTTP headers
628
00:27:14,790 --> 00:27:16,500
you've come to know and love.
629
00:27:16,500 --> 00:27:17,970
The body is typically represented
630
00:27:17,970 --> 00:27:22,110
these days as JSON or
JavaScript Object Notation.
631
00:27:22,110 --> 00:27:25,770
JSON provides a great way to
structure and nest your data.
632
00:27:25,770 --> 00:27:28,260
Every programming language
that I can think of provides
633
00:27:28,260 --> 00:27:32,472
some means of turning a JSON
string into a native object.
634
00:27:32,472 --> 00:27:34,620
The content type is
typically something that you
635
00:27:34,620 --> 00:27:37,950
can specify in your request
if JSON isn't your thing.
636
00:27:37,950 --> 00:27:41,220
If you recall, there are
other HTTP verbs available.
637
00:27:41,220 --> 00:27:43,140
These verbs are used in REST APIs
638
00:27:43,140 --> 00:27:46,080
to clearly state the
intention of your request.
639
00:27:46,080 --> 00:27:47,340
Wanna add an author?
640
00:27:47,340 --> 00:27:50,010
Host to the /authors
endpoint and send the data
641
00:27:50,010 --> 00:27:52,257
that you want to update in
the body of your request
642
00:27:52,257 --> 00:27:55,110
and these fields will be
defined for you somewhere.
643
00:27:55,110 --> 00:27:56,190
Wanna remove an author?
644
00:27:56,190 --> 00:27:59,520
Send a delete to that
specific author resource.
645
00:27:59,520 --> 00:28:01,740
Updates typically support the patch verb,
646
00:28:01,740 --> 00:28:05,100
and you'll see we're able
to represent our CRUD needs,
647
00:28:05,100 --> 00:28:09,300
the create, request, update
and delete using HTTP methods.
648
00:28:09,300 --> 00:28:10,650
Pretty cool, right?
649
00:28:10,650 --> 00:28:12,420
What this means is that
you can interact with
650
00:28:12,420 --> 00:28:15,750
any application out there
that's exposed their REST API.
651
00:28:15,750 --> 00:28:18,120
You could grab data,
remotely automate tasks,
652
00:28:18,120 --> 00:28:20,760
and even smoosh together
different services.
653
00:28:20,760 --> 00:28:23,340
This is called a mashup,
and here's the thing,
654
00:28:23,340 --> 00:28:26,964
there are a ton of APIs
available, just about anything
655
00:28:26,964 --> 00:28:29,820
that you can imagine, and
if they're truly RESTful,
656
00:28:29,820 --> 00:28:31,860
they'll all feel pretty much the same.
657
00:28:31,860 --> 00:28:34,470
You can build anything, there
are services that allow you
658
00:28:34,470 --> 00:28:38,520
to do incredible things with
just a few simple API calls.
659
00:28:38,520 --> 00:28:41,250
So now the question becomes
what are you gonna build?
660
00:28:41,250 --> 00:28:43,680
So why don't you take a quick
break and when you come back,
661
00:28:43,680 --> 00:28:45,960
let's explore a RESTful API together.
662
00:28:45,960 --> 00:28:48,360
We'll take a peek at how to use
the music streaming service,
663
00:28:48,360 --> 00:28:51,685
Spotify and their excellent RESTful API.
664
00:28:51,685 --> 00:28:54,352
(upbeat music)
665
00:29:06,660 --> 00:29:08,460
You have some newfound understanding
666
00:29:08,460 --> 00:29:10,050
of how web-based APIs work.
667
00:29:10,050 --> 00:29:11,460
I walked you quickly through some
668
00:29:11,460 --> 00:29:13,800
imaginary REST APIs and now I'm thinking
669
00:29:13,800 --> 00:29:16,260
it's time that we get
a little more specific.
670
00:29:16,260 --> 00:29:18,090
Why don't we go exploring together?
671
00:29:18,090 --> 00:29:20,370
Some of these REST APIs
allow you to give it a try
672
00:29:20,370 --> 00:29:22,620
from the comfort of your
very own web browser.
673
00:29:22,620 --> 00:29:24,210
One of my personal favorites that allows
674
00:29:24,210 --> 00:29:27,630
for exploration is the streaming
music service, Spotify.
675
00:29:27,630 --> 00:29:30,480
So here I am at spotify.com.
676
00:29:30,480 --> 00:29:33,870
Now, a quick word of warning,
it is going to look different.
677
00:29:33,870 --> 00:29:36,450
I guarantee you this site
is gonna look different
678
00:29:36,450 --> 00:29:39,720
because they're always
making things better for us,
679
00:29:39,720 --> 00:29:42,672
for us Spotify users, us lovers of music,
680
00:29:42,672 --> 00:29:45,960
and as well us developers.
681
00:29:45,960 --> 00:29:48,270
So I want you to try this.
682
00:29:48,270 --> 00:29:50,160
When you go to a site,
any site that you want to,
683
00:29:50,160 --> 00:29:51,508
you'll see here that this is really nice,
684
00:29:51,508 --> 00:29:52,799
Spotify's letting us kind of test out what
685
00:29:52,799 --> 00:29:55,890
it feels like in the web, on the webpage.
686
00:29:55,890 --> 00:29:58,740
But if I scroll down to the bottom,
687
00:29:58,740 --> 00:30:01,020
that's typically where
they hide nerdy stuff.
688
00:30:01,020 --> 00:30:02,910
Now, I knew this was
here, but if I didn't,
689
00:30:02,910 --> 00:30:05,280
I would look around for
something like this,
690
00:30:05,280 --> 00:30:09,120
this Developers, and I'm
going to click into here.
691
00:30:09,120 --> 00:30:11,261
Oh, I cannot tell you how good it feels as
692
00:30:11,261 --> 00:30:13,648
a developer to end up in
a place where it feels
693
00:30:13,648 --> 00:30:15,600
like you're being taken care of, right?
694
00:30:15,600 --> 00:30:16,830
This is so nice.
695
00:30:16,830 --> 00:30:20,040
The Spotify for Developers,
it looks like it
696
00:30:20,040 --> 00:30:23,250
was thoughtful and I can tell
you that it is very nice.
697
00:30:23,250 --> 00:30:24,723
It's a very nice tool.
698
00:30:25,942 --> 00:30:27,780
You can scroll down, you
can see all sorts of stuff.
699
00:30:27,780 --> 00:30:28,860
They give you some examples
700
00:30:28,860 --> 00:30:30,720
of what you might want to do, right?
701
00:30:30,720 --> 00:30:32,310
What could you build with this?
702
00:30:32,310 --> 00:30:35,130
So you could find out
like different things,
703
00:30:35,130 --> 00:30:38,355
like you could use the
API to see the beats
704
00:30:38,355 --> 00:30:40,290
and the sections and the bars.
705
00:30:40,290 --> 00:30:42,150
I think that there's a way to figure out
706
00:30:42,150 --> 00:30:44,070
if a song is danceable or not.
707
00:30:44,070 --> 00:30:46,443
So maybe I could import
dancing. We'll see.
708
00:30:47,474 --> 00:30:50,220
And if I scroll back up to the top here,
709
00:30:50,220 --> 00:30:51,720
you'll see that there's
these different headings.
710
00:30:51,720 --> 00:30:53,550
We've got this Discover,
I think this is great
711
00:30:53,550 --> 00:30:56,280
if you're going to explore
things, we have this Docs,
712
00:30:56,280 --> 00:30:59,580
you'll see that there's all
types of different, actually,
713
00:30:59,580 --> 00:31:04,580
APIs and SDKs, software
development kits, which are APIs,
714
00:31:04,590 --> 00:31:06,240
which allow you to do different things.
715
00:31:06,240 --> 00:31:07,590
You'll see that there's ones for iOS,
716
00:31:07,590 --> 00:31:08,423
there's ones for Android.
717
00:31:08,423 --> 00:31:11,010
What we're gonna be focusing
on is the one for the web APIs.
718
00:31:11,010 --> 00:31:13,083
So if I click into that,
719
00:31:14,280 --> 00:31:16,890
we'll get a nice overview of what this is.
720
00:31:16,890 --> 00:31:19,177
I'm gonna blow this up just a little bit.
721
00:31:19,177 --> 00:31:22,290
So you'll see based on some simple REST,
722
00:31:22,290 --> 00:31:24,650
representational state
transfer principles,
723
00:31:24,650 --> 00:31:26,700
that's what we're doing, that's
what we're going through.
724
00:31:26,700 --> 00:31:29,520
We're going through our scavenger hunt.
725
00:31:29,520 --> 00:31:30,540
We're going through that.
726
00:31:30,540 --> 00:31:33,420
There's a Spotify web
API that returns JSON,
727
00:31:33,420 --> 00:31:35,301
JavaScript Object Notation about
728
00:31:35,301 --> 00:31:37,830
music, artist, albums, and tracks, right?
729
00:31:37,830 --> 00:31:39,810
So that's awesome. That's great.
730
00:31:39,810 --> 00:31:41,430
So we can see all sorts
of different stuff.
731
00:31:41,430 --> 00:31:44,334
It opens up at this api.spotify.com is
732
00:31:44,334 --> 00:31:46,860
the specific URL and then it has a set
733
00:31:46,860 --> 00:31:49,200
of endpoints with each unique path, right?
734
00:31:49,200 --> 00:31:52,530
Each of those URLs that
we were looking at before,
735
00:31:52,530 --> 00:31:55,350
there is a way to get specific data.
736
00:31:55,350 --> 00:31:57,360
So you could do this
thing where you authorize.
737
00:31:57,360 --> 00:31:59,100
So, I could be a user,
738
00:31:59,100 --> 00:32:01,140
you could see what I recently listened to.
739
00:32:01,140 --> 00:32:02,760
I could have a playlist,
I could add to it.
740
00:32:02,760 --> 00:32:04,140
But in order to do that, you need
741
00:32:04,140 --> 00:32:06,510
to have authorization
to be able to do that.
742
00:32:06,510 --> 00:32:07,710
You don't wanna be able to just add
743
00:32:07,710 --> 00:32:09,210
to anybody's playlist, right?
744
00:32:09,210 --> 00:32:11,692
So there is some
authorization that's available
745
00:32:11,692 --> 00:32:15,180
and we are not gonna do anything
that requires that here.
746
00:32:15,180 --> 00:32:16,800
So if you keep on looking down here,
747
00:32:16,800 --> 00:32:18,990
you'll see that there's, it's based on
748
00:32:18,990 --> 00:32:22,440
those REST principles and you'll see that
749
00:32:22,440 --> 00:32:25,470
it does get to retrieve resources, right?
750
00:32:25,470 --> 00:32:28,170
And there's the post to
create resources, and again,
751
00:32:28,170 --> 00:32:31,668
resources here are songs
and artists and tracks.
752
00:32:31,668 --> 00:32:33,570
Maybe the resource you're
creating here is one
753
00:32:33,570 --> 00:32:35,670
of those playlists that we talked about.
754
00:32:35,670 --> 00:32:37,710
You can change using a put
755
00:32:37,710 --> 00:32:39,330
and a delete will delete the resource.
756
00:32:39,330 --> 00:32:42,870
So awesome, right? So it's
using REST like we saw.
757
00:32:42,870 --> 00:32:46,260
You'll see that Spotify
uses this URI style.
758
00:32:46,260 --> 00:32:48,600
So it's a Spotify track and then it
759
00:32:48,600 --> 00:32:51,270
has this unique ID, this Spotify ID.
760
00:32:51,270 --> 00:32:54,450
This will make more
sense as we dig into it
761
00:32:54,450 --> 00:32:56,760
a little bit more and then
you'll see that there's always
762
00:32:56,760 --> 00:33:01,107
this Spotify URL that allows
you to see what it was.
763
00:33:01,107 --> 00:33:04,170
And it will show you this as well.
764
00:33:04,170 --> 00:33:06,090
As we said, the responses come back
765
00:33:06,090 --> 00:33:09,289
and they are a JSON object
and we're gonna be looking
766
00:33:09,289 --> 00:33:12,660
here at a tool in the future called Curl,
767
00:33:12,660 --> 00:33:14,730
which you can use from your command line.
768
00:33:14,730 --> 00:33:17,070
That's what this dollar
sign here is talking about.
769
00:33:17,070 --> 00:33:19,290
I'll show you all this,
but basically it's saying
770
00:33:19,290 --> 00:33:20,700
that there's a lot of
artists that come back.
771
00:33:20,700 --> 00:33:21,750
You don't want all the
artists in it, it will
772
00:33:21,750 --> 00:33:26,070
come back paginated and of
course, you can use caching.
773
00:33:26,070 --> 00:33:27,570
We'll take a look at that here,
774
00:33:27,570 --> 00:33:31,080
you can see if the thing
has changed or not.
775
00:33:31,080 --> 00:33:34,230
So we'll take a look at that
and basically the response
776
00:33:34,230 --> 00:33:35,550
that comes back, if everything's good,
777
00:33:35,550 --> 00:33:38,940
it's gonna say a 200 or these,
these 200 level accounts.
778
00:33:38,940 --> 00:33:41,070
And then there's bad requests.
779
00:33:41,070 --> 00:33:44,056
So if you ask wrong or
maybe it wasn't found,
780
00:33:44,056 --> 00:33:46,586
that's the 404 or unauthorized,
if we try to do one
781
00:33:46,586 --> 00:33:49,440
of those playlists, we get an unauthorized
782
00:33:49,440 --> 00:33:51,294
and there's also if you're a developer,
783
00:33:51,294 --> 00:33:53,760
you never wanna see
this one, it's the 500.
784
00:33:53,760 --> 00:33:57,480
It means that you made an
error on the server side.
785
00:33:57,480 --> 00:33:59,070
We won't be doing any of those 'cause
786
00:33:59,070 --> 00:34:02,130
we're just gonna be hitting
somebody else's code.
787
00:34:02,130 --> 00:34:06,840
Cool, all right, so Spotify
offers the ability to,
788
00:34:06,840 --> 00:34:08,460
you can look at this and
you can build your own
789
00:34:08,460 --> 00:34:10,260
curl request, but one of
the really nice things
790
00:34:10,260 --> 00:34:13,258
that I love about their
API, and you'll find
791
00:34:13,258 --> 00:34:15,690
this happens often, if
we scroll back up here
792
00:34:15,690 --> 00:34:18,000
to the top, sorry if I'm
making you sick there,
793
00:34:18,000 --> 00:34:20,853
we're gonna jump in here to
what's known as the console.
794
00:34:22,380 --> 00:34:25,050
Over on the left are the
things that we can do
795
00:34:25,050 --> 00:34:27,033
with their API and one
of the things I wanna
796
00:34:27,033 --> 00:34:31,980
do first is I want to
search and you can see
797
00:34:31,980 --> 00:34:34,320
it's making a get to the search endpoint.
798
00:34:34,320 --> 00:34:36,600
So I'm gonna go into there
and what's really nice
799
00:34:36,600 --> 00:34:38,328
is it's set it up so that we can kind
800
00:34:38,328 --> 00:34:40,590
of build the query that we're looking for.
801
00:34:40,590 --> 00:34:42,660
So now we need to decide
what we're gonna do.
802
00:34:42,660 --> 00:34:45,630
I think probably the
first person that I would
803
00:34:45,630 --> 00:34:47,360
ever search for, the first
artist I would search for.
804
00:34:47,360 --> 00:34:49,260
And you can see that here it's showing
805
00:34:49,260 --> 00:34:50,880
the different values of what that is.
806
00:34:50,880 --> 00:34:52,560
I would probably search for Beyonce.
807
00:34:52,560 --> 00:34:54,330
I mean, right, wouldn't you?
808
00:34:54,330 --> 00:34:56,640
And I could choose, is
that a track or an artist?
809
00:34:56,640 --> 00:34:59,258
So the type there is important,
and if I type artist,
810
00:34:59,258 --> 00:35:02,460
you'll see that what's
happening is you'll see
811
00:35:02,460 --> 00:35:05,040
the curl here is changing,
it's changing the,
812
00:35:05,040 --> 00:35:06,690
it says the cue is the Beyonce.
813
00:35:06,690 --> 00:35:08,310
So that's one of the parameters that
814
00:35:08,310 --> 00:35:11,070
we're passing into the
API and artist is here.
815
00:35:11,070 --> 00:35:12,450
And you can see there's different things
816
00:35:12,450 --> 00:35:13,410
that we could do here.
817
00:35:13,410 --> 00:35:14,880
What's really important is that it
818
00:35:14,880 --> 00:35:16,890
needs to have this OAuth token.
819
00:35:16,890 --> 00:35:19,260
Now what's nice is we
can build one of those
820
00:35:19,260 --> 00:35:21,300
even if we don't have a Spotify account.
821
00:35:21,300 --> 00:35:22,133
So I'm gonna do that.
822
00:35:22,133 --> 00:35:23,550
I'm gonna click this Get Token,
823
00:35:23,550 --> 00:35:26,550
I am not currently logged
in and I actually don't
824
00:35:26,550 --> 00:35:29,850
have a Spotify account yet in this user.
825
00:35:29,850 --> 00:35:32,050
I do have a Spotify
account. I love Spotify.
826
00:35:32,910 --> 00:35:35,430
And this is asking,
basically what you would do
827
00:35:35,430 --> 00:35:37,470
is you would create a
specific OAuth token.
828
00:35:37,470 --> 00:35:38,963
If you were ever to use this API outside
829
00:35:38,963 --> 00:35:40,290
of where we're doing this right now,
830
00:35:40,290 --> 00:35:42,660
you would create one of these
tokens so that you could
831
00:35:42,660 --> 00:35:45,690
log in later and you say
what it is that you want.
832
00:35:45,690 --> 00:35:46,650
So here's the playlist, right?
833
00:35:46,650 --> 00:35:47,970
We don't, we're not gonna do
any of the playlist stuff,
834
00:35:47,970 --> 00:35:49,350
we're just gonna do a search.
835
00:35:49,350 --> 00:35:52,110
Maybe we'll look up some
of Beyonce's tunes, but,
836
00:35:52,110 --> 00:35:54,960
so I'm gonna go and I'm gonna
click this Request Token.
837
00:35:54,960 --> 00:35:57,030
So now it's asking me to either log in
838
00:35:57,030 --> 00:35:58,543
with my Spotify account, which I can,
839
00:35:58,543 --> 00:36:01,376
or I can create a new one,
and let's walk through that
840
00:36:01,376 --> 00:36:04,020
just in case you don't have
a Spotify account already.
841
00:36:04,020 --> 00:36:05,130
Let's create a new one.
842
00:36:05,130 --> 00:36:07,503
And this will be at my
developer account here.
843
00:36:08,670 --> 00:36:10,980
So I'm gonna put in my email.
844
00:36:10,980 --> 00:36:13,380
So my email, I don't know
if you know about this,
845
00:36:13,380 --> 00:36:18,380
but if you use Gmail you
can do a little plus sign
846
00:36:19,680 --> 00:36:23,070
and it will still send to
the left side of your Gmail.
847
00:36:23,070 --> 00:36:27,803
So I'm gonna do at Spotify
sign up and that way
848
00:36:27,803 --> 00:36:30,210
any emails I get from
here, it will have that.
849
00:36:30,210 --> 00:36:33,330
And it's kind of a way to let
you have multiple accounts.
850
00:36:33,330 --> 00:36:38,330
And I think, so again, my Gmail
is craigsdennis@gmail.com,
851
00:36:39,420 --> 00:36:44,420
but I'm gonna do SpotifySignup@gmail.com
852
00:36:44,550 --> 00:36:45,720
and it will go to my Gmail.
853
00:36:45,720 --> 00:36:47,493
It'll just kind of ignore
this, Gmail does that for you.
854
00:36:47,493 --> 00:36:48,840
It's pretty nice, right?
855
00:36:48,840 --> 00:36:51,090
So I'm gonna put in the
same password as my luggage,
856
00:36:51,090 --> 00:36:55,173
which is 1, 2, 3, 4, 5, 6, just kidding.
857
00:36:56,700 --> 00:36:59,430
And what should we call you?
858
00:36:59,430 --> 00:37:01,680
Oh, you know what?
859
00:37:01,680 --> 00:37:03,933
I love it when you call me Big Poppa,
860
00:37:05,340 --> 00:37:07,440
that will appear on my
profile, I am ready for it.
861
00:37:07,440 --> 00:37:12,440
And let's see, it is my
birthday on November 19th, 19.
862
00:37:16,205 --> 00:37:17,730
Let's see, what do I, I think,
863
00:37:17,730 --> 00:37:20,550
wouldn't it be nice if I was born in 1999?
864
00:37:20,550 --> 00:37:23,220
What is your gender? Oh, this is nice.
865
00:37:23,220 --> 00:37:25,950
How nice. This is like super inclusive.
866
00:37:25,950 --> 00:37:28,576
I love that this is so inclusive.
867
00:37:28,576 --> 00:37:31,290
It's like somebody at
Spotify went and talked
868
00:37:31,290 --> 00:37:34,380
to their people and listened
to what people wanted
869
00:37:34,380 --> 00:37:37,945
and they included people
who identify as non-binary
870
00:37:37,945 --> 00:37:40,200
or other, or prefer not to say.
871
00:37:40,200 --> 00:37:43,650
So like wherever you sit in
that I love and hats off to you
872
00:37:43,650 --> 00:37:47,520
Spotify for being inclusive,
'cause inclusivity matters.
873
00:37:47,520 --> 00:37:48,727
Share my registration data.
874
00:37:48,727 --> 00:37:52,641
Sure, why not? I am not a robot.
875
00:37:52,641 --> 00:37:55,893
I don't think I am. Oh, oh no.
876
00:37:56,730 --> 00:38:00,240
The images with bicycles.
That one's got a bike.
877
00:38:00,240 --> 00:38:02,493
That one's got a bike.
That one has a bike.
878
00:38:03,960 --> 00:38:05,970
Oh, what is that garbage there?
879
00:38:05,970 --> 00:38:10,140
Is that, this is a bike
lane. This is a bike.
880
00:38:10,140 --> 00:38:15,140
Okay, here we go, please.
Okay, I am not a robot.
881
00:38:15,210 --> 00:38:17,520
Thank you. All right, so
I'm gonna click Sign Up.
882
00:38:17,520 --> 00:38:20,670
Oh, I am male. I am male.
883
00:38:20,670 --> 00:38:23,730
So here we go. That's how I identify.
884
00:38:23,730 --> 00:38:27,610
All right, I'm gonna save that log in
885
00:38:28,511 --> 00:38:30,660
and I am going to log in with it.
886
00:38:30,660 --> 00:38:33,990
So here we go. All right.
887
00:38:33,990 --> 00:38:36,900
So it's asking me if I have
access to this developer console
888
00:38:36,900 --> 00:38:39,993
and it'll see my logged in
as Big Poppa, here we go.
889
00:38:41,130 --> 00:38:42,540
And now you'll notice here that
890
00:38:42,540 --> 00:38:44,550
there is this token here, right?
891
00:38:44,550 --> 00:38:46,680
This is this OAuth token that got created
892
00:38:46,680 --> 00:38:48,960
for me by Spotify and it's putting it into
893
00:38:48,960 --> 00:38:50,490
this console for me so it can share it.
894
00:38:50,490 --> 00:38:52,590
Now you never wanna let your token out.
895
00:38:52,590 --> 00:38:54,000
If you get a hold of, somebody gets a hold
896
00:38:54,000 --> 00:38:56,010
of your token, they can
do stuff on your behalf.
897
00:38:56,010 --> 00:38:59,210
And I realize that this is
on a screen being recorded
898
00:38:59,210 --> 00:39:02,190
and I'm going to get rid of
this token here in a bit.
899
00:39:02,190 --> 00:39:03,450
So you will not be able to have it.
900
00:39:03,450 --> 00:39:06,120
So I've got this token,
it's filled out here.
901
00:39:06,120 --> 00:39:07,230
I'm gonna click Try It
902
00:39:07,230 --> 00:39:08,910
and we're gonna do a search for Beyonce.
903
00:39:08,910 --> 00:39:10,650
Let's see what happens.
904
00:39:10,650 --> 00:39:13,620
So you will see that we
got some information back.
905
00:39:13,620 --> 00:39:15,150
So we got a list of artists,
906
00:39:15,150 --> 00:39:17,010
'cause that's the type
that I searched for.
907
00:39:17,010 --> 00:39:18,670
And this is the search that we did.
908
00:39:18,670 --> 00:39:20,367
We'll see some external URLs
909
00:39:20,367 --> 00:39:23,130
and we think that this is probably her.
910
00:39:23,130 --> 00:39:25,230
I'm gonna see, I'm gonna
grab this really quick,
911
00:39:25,230 --> 00:39:28,080
but you can kind of see how
things are laid out here, right?
912
00:39:28,080 --> 00:39:30,690
So this is my Spotify URL for that.
913
00:39:30,690 --> 00:39:34,393
Let's see if this is
her, this looks like her.
914
00:39:37,020 --> 00:39:38,887
Yeah, yeah, definitely. So, great.
915
00:39:38,887 --> 00:39:43,380
"Crazy in Love," "Cuff It."
I haven't heard that one yet.
916
00:39:43,380 --> 00:39:45,690
Awesome. So this is Beyonce, great.
917
00:39:45,690 --> 00:39:48,543
So we got her, we found
her, we used this search.
918
00:39:49,410 --> 00:39:52,290
It has, shows how many followers she has.
919
00:39:52,290 --> 00:39:54,000
Wow. 32 million.
920
00:39:54,000 --> 00:39:56,070
Good job. And it tells the the genre.
921
00:39:56,070 --> 00:39:58,140
So we can do all sorts of
really cool stuff with this.
922
00:39:58,140 --> 00:40:01,377
And it's here, you'll see
that I'm getting a URL,
923
00:40:01,377 --> 00:40:03,600
I'm getting a link that will open up
924
00:40:03,600 --> 00:40:05,567
her specific artist page, right?
925
00:40:05,567 --> 00:40:07,860
So, here is her ID.
926
00:40:07,860 --> 00:40:10,377
So if I take her ID,
I'm gonna grab this ID
927
00:40:10,377 --> 00:40:12,840
and I'm gonna come over
here to Artists and I can
928
00:40:12,840 --> 00:40:16,140
come in here and I can show
all of the artist's albums.
929
00:40:16,140 --> 00:40:19,530
So you'll see it'll be artists/ID/albums.
930
00:40:19,530 --> 00:40:21,060
Let's see all of the albums that she did.
931
00:40:21,060 --> 00:40:23,670
But let's look at that in JSON format.
932
00:40:23,670 --> 00:40:28,320
So the artist that I want,
I'm just gonna pipe that ID in
933
00:40:28,320 --> 00:40:31,050
there from before, right, now
it still has my bearer token.
934
00:40:31,050 --> 00:40:34,809
The console has done that
for me and I can go ahead
935
00:40:34,809 --> 00:40:36,963
and do Try It and we should see that now,
936
00:40:36,963 --> 00:40:39,150
it's gonna return back albums, right?
937
00:40:39,150 --> 00:40:42,240
So we've made a get request to
the albums and I can see all
938
00:40:42,240 --> 00:40:45,270
of the albums that she's
had here and we can see
939
00:40:45,270 --> 00:40:47,490
where they're available in
different markets as well.
940
00:40:47,490 --> 00:40:49,140
Looks like she's available in lots
941
00:40:49,140 --> 00:40:50,910
of markets all over the world.
942
00:40:50,910 --> 00:40:53,970
Who runs the world? All
right, so here we go.
943
00:40:53,970 --> 00:40:58,623
We are going to look, let's
see, these are albums.
944
00:40:59,910 --> 00:41:01,980
That's the artist there.
That's the type of the artist.
945
00:41:01,980 --> 00:41:03,750
Let's get one of the albums here,
946
00:41:03,750 --> 00:41:04,950
let's make sure that we got it.
947
00:41:04,950 --> 00:41:07,380
So you see that it's got
different things like I could
948
00:41:07,380 --> 00:41:10,470
get access to maybe the
image of what this album is.
949
00:41:10,470 --> 00:41:12,750
So let's do that, I'm
gonna post that here,
950
00:41:12,750 --> 00:41:15,240
open that up and let's see, there she is
951
00:41:15,240 --> 00:41:18,153
on her horse, her magical horse there.
952
00:41:20,970 --> 00:41:23,040
So that's pretty cool,
right? This is awesome.
953
00:41:23,040 --> 00:41:24,900
I can get access to all
sorts of information
954
00:41:24,900 --> 00:41:26,850
about an artist I can get by their ID.
955
00:41:26,850 --> 00:41:29,010
I can go and find all
sorts of different things
956
00:41:29,010 --> 00:41:30,296
that I wanted to do, right?
957
00:41:30,296 --> 00:41:34,950
So, if I knew an album
too, once I have the ID,
958
00:41:34,950 --> 00:41:37,113
I could get the ID, I
could get the tracks,
959
00:41:39,000 --> 00:41:39,990
all sorts of amazing things.
960
00:41:39,990 --> 00:41:41,160
And then there's these playlists, right?
961
00:41:41,160 --> 00:41:43,170
So you can add a playlist, if I wanted to,
962
00:41:43,170 --> 00:41:45,150
I could post to create a playlist.
963
00:41:45,150 --> 00:41:46,827
Now of course I need to
authenticate to do that
964
00:41:46,827 --> 00:41:48,846
and that's a little bit
of what we're doing here,
965
00:41:48,846 --> 00:41:52,096
but I could add, put together a playlist
966
00:41:52,096 --> 00:41:55,500
for everybody to do using this API.
967
00:41:55,500 --> 00:41:59,313
And again, when we are
looking at the artists,
968
00:41:59,313 --> 00:42:01,500
when when we're looking
at this get artist,
969
00:42:01,500 --> 00:42:03,030
it's showing this curl command
970
00:42:03,030 --> 00:42:04,590
and we're gonna take a
look at that here in a bit.
971
00:42:04,590 --> 00:42:06,722
But I just want to take
a little bit of time.
972
00:42:06,722 --> 00:42:08,910
I want you to go and take a look, go back
973
00:42:08,910 --> 00:42:10,560
to this Discover section and kind
974
00:42:10,560 --> 00:42:13,765
of get inspired by
what's available, right?
975
00:42:13,765 --> 00:42:16,230
So you can look at, there's
these different things
976
00:42:16,230 --> 00:42:18,165
where you can, I was right, you can check
977
00:42:18,165 --> 00:42:21,000
and see if there's danceability of a song.
978
00:42:21,000 --> 00:42:23,610
You can go and find a
track and is it danceable
979
00:42:23,610 --> 00:42:25,770
and you know that Beyonce's
is, the songs are gonna
980
00:42:25,770 --> 00:42:29,310
come back very high in the
danceability thing there.
981
00:42:29,310 --> 00:42:31,560
But lots of powerful
things and there's lots
982
00:42:31,560 --> 00:42:33,690
of cool examples that
you can do that people
983
00:42:33,690 --> 00:42:35,220
have already gone and built.
984
00:42:35,220 --> 00:42:36,870
And you can take a look
at how they built it
985
00:42:36,870 --> 00:42:39,300
and how they use the API recommendations.
986
00:42:39,300 --> 00:42:43,050
This is awesome, really
this is like super wide open
987
00:42:43,050 --> 00:42:45,180
to you and you can do all of this
988
00:42:45,180 --> 00:42:47,826
because of the APIs that they provide.
989
00:42:47,826 --> 00:42:49,200
Pretty cool, right?
990
00:42:49,200 --> 00:42:52,140
You can get access to all
of Spotify's music library
991
00:42:52,140 --> 00:42:54,292
and you can build tools
that extend their platform.
992
00:42:54,292 --> 00:42:56,520
I highly recommend that
you go and take a look
993
00:42:56,520 --> 00:42:58,860
at what other people have
built using these APIs.
994
00:42:58,860 --> 00:43:00,148
It's super impressive.
995
00:43:00,148 --> 00:43:02,940
Did you notice how fast
those results came back?
996
00:43:02,940 --> 00:43:05,133
How could it do that search so quick?
997
00:43:06,030 --> 00:43:08,010
Oh wait a second, does it even need to?
998
00:43:08,010 --> 00:43:09,570
Those results don't change all the time.
999
00:43:09,570 --> 00:43:12,479
It's not like Beyonce is
dropping a new song every minute,
1000
00:43:12,479 --> 00:43:14,010
though I wish she would.
1001
00:43:14,010 --> 00:43:16,899
Those results are definitely
cacheable, ding, ding ding.
1002
00:43:16,899 --> 00:43:19,560
Cacheability is also
available on the client
1003
00:43:19,560 --> 00:43:20,760
and we'll get to that here in a bit.
1004
00:43:20,760 --> 00:43:23,968
But this is a great example
of a layered system.
1005
00:43:23,968 --> 00:43:26,448
I'm almost positive that Spotify has
1006
00:43:26,448 --> 00:43:29,025
set up things so that
it returns the same JSON
1007
00:43:29,025 --> 00:43:31,740
from its own server
side caching mechanism.
1008
00:43:31,740 --> 00:43:34,158
It's not rendered that
on every single request.
1009
00:43:34,158 --> 00:43:36,900
As a user of the API, I don't know how
1010
00:43:36,900 --> 00:43:39,450
it's doing that and frankly, I don't care.
1011
00:43:39,450 --> 00:43:40,680
I want it to be available
1012
00:43:40,680 --> 00:43:43,020
and fast when I hit that specific URL.
1013
00:43:43,020 --> 00:43:44,520
Beyonce definitely appreciates
1014
00:43:44,520 --> 00:43:45,780
how fast the results will return.
1015
00:43:45,780 --> 00:43:48,390
She might even take that
API dev to Red Lobster.
1016
00:43:48,390 --> 00:43:50,880
Let's go ahead and take a
quick break, during this break,
1017
00:43:50,880 --> 00:43:52,926
I'd love for you to move
around and think about
1018
00:43:52,926 --> 00:43:56,820
what you might be able to
build with that Spotify API.
1019
00:43:56,820 --> 00:43:59,580
For instance, while I was using this API,
1020
00:43:59,580 --> 00:44:01,080
I had this idea pop up.
1021
00:44:01,080 --> 00:44:03,630
When I'm at a music festival,
I often have a hard time
1022
00:44:03,630 --> 00:44:06,210
deciding which band I should
go see, there's so many.
1023
00:44:06,210 --> 00:44:08,760
Now I would love to have an app suggest
1024
00:44:08,760 --> 00:44:09,720
to me which of the bands that are
1025
00:44:09,720 --> 00:44:12,210
currently playing I
would most likely enjoy.
1026
00:44:12,210 --> 00:44:14,280
You know, based on my listening habits,
1027
00:44:14,280 --> 00:44:16,320
I'm pretty sure that you
could build that just
1028
00:44:16,320 --> 00:44:18,300
with the Spotify API and using a list
1029
00:44:18,300 --> 00:44:20,430
of events of the bands
that are performing.
1030
00:44:20,430 --> 00:44:22,410
And if you do end up building that,
1031
00:44:22,410 --> 00:44:24,960
share it with me 'cause I need it.
1032
00:44:24,960 --> 00:44:26,160
What other interests do you have
1033
00:44:26,160 --> 00:44:28,320
that provide an API that you can use?
1034
00:44:28,320 --> 00:44:29,760
Check the notes for more ideas.
1035
00:44:29,760 --> 00:44:31,950
Now, after you come back from your break,
1036
00:44:31,950 --> 00:44:33,160
let's dive a little deeper and make use
1037
00:44:33,160 --> 00:44:36,633
of an API using our own
tools, see you soon.
1038
00:44:39,120 --> 00:44:41,490
No really, take a quick break.
1039
00:44:41,490 --> 00:44:43,840
Seriously, it'll do you good. No binging.
1040
00:44:44,982 --> 00:44:47,649
(upbeat music)
1041
00:45:01,530 --> 00:45:02,782
While I realized that exploring
1042
00:45:02,782 --> 00:45:05,520
an API on a website is informative,
1043
00:45:05,520 --> 00:45:08,460
it might not feel like you're
actually using that API.
1044
00:45:08,460 --> 00:45:10,800
I think the next logical step in exploring
1045
00:45:10,800 --> 00:45:13,110
is actually making that request yourself
1046
00:45:13,110 --> 00:45:15,600
from your computer, not from a website.
1047
00:45:15,600 --> 00:45:17,490
Now as I pointed out in the Spotify docs,
1048
00:45:17,490 --> 00:45:20,873
there were examples that were
using a command called Curl.
1049
00:45:20,873 --> 00:45:24,120
Curl is an open source tool
that is used to send data back
1050
00:45:24,120 --> 00:45:26,760
and forth and it runs
locally on your computer
1051
00:45:26,760 --> 00:45:29,040
and it's awesome for
poking around at APIs.
1052
00:45:29,040 --> 00:45:30,794
What do you say we explore it a bit?
1053
00:45:30,794 --> 00:45:34,170
Okay, so we are back
here on our Spotify page
1054
00:45:34,170 --> 00:45:38,163
and we see that there is a
command here that says Curl.
1055
00:45:39,150 --> 00:45:42,330
Curl is a command that we
can run from our terminal.
1056
00:45:42,330 --> 00:45:45,210
Now if both of those terms are new to you,
1057
00:45:45,210 --> 00:45:48,800
command and terminal, this
is a great time to head over
1058
00:45:48,800 --> 00:45:51,660
to the notes and learn
about what the terminal is.
1059
00:45:51,660 --> 00:45:53,490
So my operating system is a Mac
1060
00:45:53,490 --> 00:45:57,480
and it has an application
on it called Terminal.
1061
00:45:57,480 --> 00:46:00,420
So I'm gonna open that
up, Terminal, and in fact,
1062
00:46:00,420 --> 00:46:01,890
I'm gonna make this a little bit bigger.
1063
00:46:01,890 --> 00:46:04,441
Let's go ahead, let's let
it take up the whole screen,
1064
00:46:04,441 --> 00:46:05,790
we're gonna be in here for a little bit.
1065
00:46:05,790 --> 00:46:08,250
So I'm gonna type Clear
and clear my window.
1066
00:46:08,250 --> 00:46:11,610
All right, so this terminal
1067
00:46:11,610 --> 00:46:13,470
allows me to perform
actions on my computer.
1068
00:46:13,470 --> 00:46:15,000
Like I can make it do text to speech.
1069
00:46:15,000 --> 00:46:17,640
I can do Say and I can say, "Hi mom."
1070
00:46:17,640 --> 00:46:20,097
- Hi mom.
- And it says, "Hi mom."
1071
00:46:22,380 --> 00:46:25,500
And the Windows operating
system has a terminal as well.
1072
00:46:25,500 --> 00:46:26,760
And while it's a little bit different,
1073
00:46:26,760 --> 00:46:29,250
they're actually pretty quite similar.
1074
00:46:29,250 --> 00:46:30,840
But check the notes for more on this.
1075
00:46:30,840 --> 00:46:33,750
So what happens is I write the command
1076
00:46:33,750 --> 00:46:35,850
and then I pass in
values for the parameter.
1077
00:46:35,850 --> 00:46:36,990
In this case, it's "Hi mom."
1078
00:46:36,990 --> 00:46:39,210
Now, note that I used
quotes there because I wanna
1079
00:46:39,210 --> 00:46:42,690
pass one value, even
though there is a space,
1080
00:46:42,690 --> 00:46:44,640
if there was a space, that's
kinda how you separate things.
1081
00:46:44,640 --> 00:46:45,780
But with the quotes it's saying
1082
00:46:45,780 --> 00:46:47,883
this is one value that I'm passing in.
1083
00:46:48,900 --> 00:46:51,570
We developers spend a lot
of time in our terminals,
1084
00:46:51,570 --> 00:46:53,703
so if this is new to you,
I want you to remember
1085
00:46:53,703 --> 00:46:56,940
that it was new to everyone at one time.
1086
00:46:56,940 --> 00:46:58,836
So please take your
time and don't let this
1087
00:46:58,836 --> 00:47:01,890
get you too frustrated, you've got this.
1088
00:47:01,890 --> 00:47:04,765
So I already have Curl installed.
1089
00:47:04,765 --> 00:47:06,990
I'm gonna just go ahead
and make sure that I do
1090
00:47:06,990 --> 00:47:09,450
by typing the word
"curl," and if I see this,
1091
00:47:09,450 --> 00:47:10,980
I could see that I could type curl
1092
00:47:10,980 --> 00:47:12,930
and then the command "--help."
1093
00:47:12,930 --> 00:47:15,690
Now if I didn't have this installed,
1094
00:47:15,690 --> 00:47:17,070
if this came back with like, I don't know
1095
00:47:17,070 --> 00:47:18,870
what you're talking
about when you type curl,
1096
00:47:18,870 --> 00:47:21,030
the word curl, that's okay.
1097
00:47:21,030 --> 00:47:24,632
So we're gonna head over to the notes
1098
00:47:24,632 --> 00:47:25,980
and you'll get sorted there.
1099
00:47:25,980 --> 00:47:29,820
But the starting point, where
I want you to go is curl.se.
1100
00:47:29,820 --> 00:47:31,200
So you'll come to this page,
1101
00:47:31,200 --> 00:47:32,730
you'll see this as a command line tool
1102
00:47:32,730 --> 00:47:35,607
in library for transferring
data since 1998.
1103
00:47:35,607 --> 00:47:38,730
And that logo sure feels
like that, doesn't it?
1104
00:47:38,730 --> 00:47:39,990
It does all sorts of things.
1105
00:47:39,990 --> 00:47:42,330
What we're really concerned
about is this HTTP, right?
1106
00:47:42,330 --> 00:47:43,650
We're going to use this from
1107
00:47:43,650 --> 00:47:47,580
the command line to get access to a URL.
1108
00:47:47,580 --> 00:47:50,550
So if you don't have curl
on your command line,
1109
00:47:50,550 --> 00:47:52,710
go ahead and pause me and
check out the notes for
1110
00:47:52,710 --> 00:47:55,950
the best way to get this
installed on your computer.
1111
00:47:55,950 --> 00:47:57,750
There's a lot of different ways to do it.
1112
00:47:57,750 --> 00:47:59,248
If you come here under Download,
1113
00:47:59,248 --> 00:48:03,390
you'll see that there's
different operating systems.
1114
00:48:03,390 --> 00:48:05,730
So you've got your Linux
and you've got your Mac OS.
1115
00:48:05,730 --> 00:48:07,290
And if you come down here,
you've got your Windows.
1116
00:48:07,290 --> 00:48:10,140
So there's different ways
of getting things installed.
1117
00:48:10,140 --> 00:48:12,720
So go ahead, take your
time, get that installed.
1118
00:48:12,720 --> 00:48:15,480
And when you come back,
I want you to try this.
1119
00:48:15,480 --> 00:48:16,590
I want you to do this thing with me.
1120
00:48:16,590 --> 00:48:18,660
So I'm gonna go back to my terminal
1121
00:48:18,660 --> 00:48:20,910
and I'm gonna make sure that it works.
1122
00:48:20,910 --> 00:48:23,070
The way that I always
like to test is I like
1123
00:48:23,070 --> 00:48:25,557
to go to icanhazdadjoke.com.
1124
00:48:30,420 --> 00:48:33,600
How do you get a baby
alien to sleep? You rocket.
1125
00:48:33,600 --> 00:48:36,128
Oh, so good. Anyway,
that's how you do that.
1126
00:48:36,128 --> 00:48:38,850
That'll let you go and
it's gonna hit that website
1127
00:48:38,850 --> 00:48:41,550
and it's gonna give you back
a joke when you're ready.
1128
00:48:43,320 --> 00:48:45,930
So now that we've got
our curl up and running,
1129
00:48:45,930 --> 00:48:47,820
we've got our successful dad joke,
1130
00:48:47,820 --> 00:48:50,520
let's go ahead and run
that command from Spotify.
1131
00:48:50,520 --> 00:48:53,130
So I'm gonna come back
over to my Spotify thing
1132
00:48:53,130 --> 00:48:54,660
where I was running the search.
1133
00:48:54,660 --> 00:48:56,220
I'm gonna make sure
that it's still working
1134
00:48:56,220 --> 00:48:58,140
actually before I get
started, 'cause these tokens
1135
00:48:58,140 --> 00:49:00,620
can expire and depending
how long your break was,
1136
00:49:00,620 --> 00:49:02,280
it might have expired,
but mine is still working.
1137
00:49:02,280 --> 00:49:04,230
So I got this back here and I should
1138
00:49:04,230 --> 00:49:05,850
be able to get this from my command line.
1139
00:49:05,850 --> 00:49:07,507
And what I'm gonna do is
I'm going to copy this,
1140
00:49:07,507 --> 00:49:09,240
I'm gonna highlight this.
1141
00:49:09,240 --> 00:49:11,039
This is a development practice known
1142
00:49:11,039 --> 00:49:14,760
by US developers known as copy pasta.
1143
00:49:14,760 --> 00:49:17,760
So I'm going to copy this and I am going
1144
00:49:17,760 --> 00:49:19,740
to go back to my terminal and I'm going
1145
00:49:19,740 --> 00:49:24,390
to paste and this long
list of things here,
1146
00:49:24,390 --> 00:49:25,800
what this is doing is just saying, hey,
1147
00:49:25,800 --> 00:49:30,800
I wanna make a get request to
the api.spotify.com/v1/search.
1148
00:49:31,170 --> 00:49:32,003
Remember, that's where we were at.
1149
00:49:32,003 --> 00:49:34,590
We were searching and we're
passing the query string
1150
00:49:34,590 --> 00:49:37,200
of Beyonce and the type of artist
1151
00:49:37,200 --> 00:49:38,850
and we're telling it, "Hey, I would like
1152
00:49:38,850 --> 00:49:42,360
to get back JSON and I
am sending you JSON,"
1153
00:49:42,360 --> 00:49:43,590
even though we're not
actually sending JSON.
1154
00:49:43,590 --> 00:49:45,780
The default has that there
and this is an important one.
1155
00:49:45,780 --> 00:49:47,070
This is sending you a header, right?
1156
00:49:47,070 --> 00:49:50,010
The "-H" is a header and authorization.
1157
00:49:50,010 --> 00:49:51,690
And this is that long
token that we had there.
1158
00:49:51,690 --> 00:49:54,120
Now if all is working, when I press Enter,
1159
00:49:54,120 --> 00:49:58,489
I should get here locally
on my machine that same list
1160
00:49:58,489 --> 00:50:02,340
of data that we did and
I did, check that out.
1161
00:50:02,340 --> 00:50:03,930
So what I'm gonna do
is I'm gonna come back
1162
00:50:03,930 --> 00:50:07,170
up here and I am going to grab, wow,
1163
00:50:07,170 --> 00:50:08,700
there's a lot of information here, right?
1164
00:50:08,700 --> 00:50:12,570
When this comes back,
I'm gonna grab her ID.
1165
00:50:12,570 --> 00:50:15,480
And so I remember that
when we were looking at it,
1166
00:50:15,480 --> 00:50:19,613
it was down in here, this
ID, is this the right one?
1167
00:50:19,613 --> 00:50:20,820
Is that the first one?
1168
00:50:20,820 --> 00:50:24,180
So we got items, no, this is
her ID here, this is her ID.
1169
00:50:24,180 --> 00:50:26,970
It starts with a six, VW.
1170
00:50:26,970 --> 00:50:28,987
So I'm gonna copy that
and I'm gonna use that.
1171
00:50:28,987 --> 00:50:31,110
I'm gonna go back and
remember I'm gonna go
1172
00:50:31,110 --> 00:50:34,410
and I'm gonna look, I wanna
see what albums she has.
1173
00:50:34,410 --> 00:50:37,440
So I'm gonna come into here
and I'm gonna remember,
1174
00:50:37,440 --> 00:50:41,190
I'm gonna paste this URL
here, and I'm gonna run this,
1175
00:50:41,190 --> 00:50:43,050
make sure that that's still working.
1176
00:50:43,050 --> 00:50:46,140
I'd like you to go ahead and pause me.
1177
00:50:46,140 --> 00:50:47,398
I think I'd like to see can you
1178
00:50:47,398 --> 00:50:51,510
get her albums locally on your machine?
1179
00:50:51,510 --> 00:50:53,700
Can you go ahead and make sure that
1180
00:50:53,700 --> 00:50:55,560
you can do the same Get Artist,
1181
00:50:55,560 --> 00:50:57,720
see all of Beyonce's albums
on your local machine?
1182
00:50:57,720 --> 00:50:59,820
So here's what we'll do, you give it a try
1183
00:51:00,750 --> 00:51:03,868
and if you, once you
get it printing locally
1184
00:51:03,868 --> 00:51:08,198
on your machine, you
can let me know and then
1185
00:51:08,198 --> 00:51:10,890
unpause me and I'll show
you how I did it, okay?
1186
00:51:10,890 --> 00:51:12,390
Are you ready? You got this.
1187
00:51:12,390 --> 00:51:15,133
Pause me.
(upbeat music)
1188
00:51:19,530 --> 00:51:21,060
Cool. So how'd you do?
1189
00:51:21,060 --> 00:51:23,310
So here's probably one way that you could
1190
00:51:23,310 --> 00:51:25,170
have done it is just copied that, right?
1191
00:51:25,170 --> 00:51:27,240
Copy this whole thing and pasted it.
1192
00:51:27,240 --> 00:51:30,060
But what I wanna show you
is that we have access to,
1193
00:51:30,060 --> 00:51:32,040
we know what these URLs are, right?
1194
00:51:32,040 --> 00:51:34,620
So we know that there's
this v1 artist and in fact,
1195
00:51:34,620 --> 00:51:39,330
we can see that there
is a get of /v1/artist.
1196
00:51:39,330 --> 00:51:40,913
And then you can actually pass their ID
1197
00:51:40,913 --> 00:51:42,450
in the URL there, right?
1198
00:51:42,450 --> 00:51:44,880
That's what this ID is here.
So, let's just go back.
1199
00:51:44,880 --> 00:51:46,530
I'm gonna show you a little trick too.
1200
00:51:46,530 --> 00:51:50,430
So, I've got her ID copied
still, so I could have just,
1201
00:51:50,430 --> 00:51:52,800
just ran that query and copied
the curl and pasted it here.
1202
00:51:52,800 --> 00:51:54,270
And if you did that, you did it right.
1203
00:51:54,270 --> 00:51:55,620
I just wanna show you a little bit more
1204
00:51:55,620 --> 00:51:57,450
of what else, how else we could explore.
1205
00:51:57,450 --> 00:51:58,980
So I'm gonna press the up arrow
1206
00:51:58,980 --> 00:52:01,238
and you'll see my cursor's moving here.
1207
00:52:01,238 --> 00:52:03,208
I'm gonna press the Option key on Mac.
1208
00:52:03,208 --> 00:52:05,730
I think you're gonna press
the Alt key on Windows.
1209
00:52:05,730 --> 00:52:08,229
You can jump around like
this and I'm going to get rid
1210
00:52:08,229 --> 00:52:13,229
of what's here, and I'm
gonna say v1 artists, right?
1211
00:52:14,310 --> 00:52:15,810
So that's the collection of artists.
1212
00:52:15,810 --> 00:52:17,670
And I have that specific ID, right?
1213
00:52:17,670 --> 00:52:20,127
So there's the ID and I'm
gonna press Enter here
1214
00:52:20,127 --> 00:52:22,680
and you'll see that I got back
Beyonce, which is awesome.
1215
00:52:22,680 --> 00:52:25,440
That's what I did and then
remember, the artists have,
1216
00:52:25,440 --> 00:52:26,970
I'm gonna go to the front of the line,
1217
00:52:26,970 --> 00:52:30,570
it's Control+A on Mac,
and I'm gonna switch this
1218
00:52:30,570 --> 00:52:33,960
so artists have, this is
specific artists, so Beyonce,
1219
00:52:33,960 --> 00:52:36,750
and we wanna see Beyonce's slash albums,
1220
00:52:36,750 --> 00:52:39,420
which is what the console
would've generated for you.
1221
00:52:39,420 --> 00:52:40,650
But I just wanted to show
you that you can kind
1222
00:52:40,650 --> 00:52:43,440
of navigate and move through
and you'll see that there's
1223
00:52:43,440 --> 00:52:46,683
a bunch of different information
that comes through here.
1224
00:52:47,880 --> 00:52:48,892
It's kind of hard to see, right?
1225
00:52:48,892 --> 00:52:52,170
So, kind of hard to parse.
1226
00:52:52,170 --> 00:52:54,030
And this is something
optionally that you can do.
1227
00:52:54,030 --> 00:52:56,250
So I press the up arrow
and I'm going to press,
1228
00:52:56,250 --> 00:52:59,855
pipe that into a tool
called JQ and you'll see
1229
00:52:59,855 --> 00:53:03,000
that it comes back very
nice and pretty, right?
1230
00:53:03,000 --> 00:53:05,640
So this is something that is very nice
1231
00:53:05,640 --> 00:53:07,442
to have and I piped that.
1232
00:53:07,442 --> 00:53:11,057
That's this, the symbol
above the Enter key is
1233
00:53:11,057 --> 00:53:14,460
this pipe symbol and it allows
you to take whatever happened
1234
00:53:14,460 --> 00:53:16,571
in this first part of the
command and take its results
1235
00:53:16,571 --> 00:53:20,610
and put it in this part of the
command, which is super cool.
1236
00:53:20,610 --> 00:53:21,990
And again, this is in the notes.
1237
00:53:21,990 --> 00:53:23,490
You don't need to, you don't
need to worry about this,
1238
00:53:23,490 --> 00:53:25,800
but I know that I can query things.
1239
00:53:25,800 --> 00:53:27,300
So I can say that of the items,
1240
00:53:27,300 --> 00:53:29,430
I'm only interested in the name,
1241
00:53:29,430 --> 00:53:31,437
the .name from each one of the items.
1242
00:53:31,437 --> 00:53:33,030
And this is a little query language
1243
00:53:33,030 --> 00:53:35,076
that's attached to this JQ program.
1244
00:53:35,076 --> 00:53:36,870
You don't need to do this,
this is just something,
1245
00:53:36,870 --> 00:53:38,340
if you're doing it from the command line,
1246
00:53:38,340 --> 00:53:40,410
it's something that we do that
we could kind of hack around
1247
00:53:40,410 --> 00:53:41,865
with a little bit and
you'll see I can get all
1248
00:53:41,865 --> 00:53:45,000
the lists of her albums and
that's pretty cool, right?
1249
00:53:45,000 --> 00:53:47,367
That's powerful, and if
you are gonna just start
1250
00:53:47,367 --> 00:53:50,220
poking around and moving
around with the URLs,
1251
00:53:50,220 --> 00:53:51,960
one thing I wanted to make
sure that you're cautious
1252
00:53:51,960 --> 00:53:55,860
of is if we come back
and we take a look at
1253
00:53:55,860 --> 00:53:58,560
the console page here, they
do a nice trick for you.
1254
00:53:58,560 --> 00:54:00,270
If we're back here in search,
like one of the things
1255
00:54:00,270 --> 00:54:03,687
that I wanna make sure I know
that Beyonce has this song
1256
00:54:03,687 --> 00:54:07,500
that's like something like,
who runs the world, right?
1257
00:54:07,500 --> 00:54:08,970
Who runs the world? Girls.
1258
00:54:08,970 --> 00:54:11,640
But I don't remember
where, what album it's on.
1259
00:54:11,640 --> 00:54:13,560
So I'm gonna search for a type track.
1260
00:54:13,560 --> 00:54:16,320
Now, note that my query has spaces here.
1261
00:54:16,320 --> 00:54:19,470
Now what's happened here is
it's done this URL encoding.
1262
00:54:19,470 --> 00:54:22,122
So like if you were trying
to mess around and work
1263
00:54:22,122 --> 00:54:24,840
with the search, you'd wanna
make sure that whatever
1264
00:54:24,840 --> 00:54:28,440
you did, you passed that
with those plus signs there.
1265
00:54:28,440 --> 00:54:31,020
So I'm gonna run that curl command
1266
00:54:31,020 --> 00:54:33,579
and we'll see who runs the world, girls.
1267
00:54:33,579 --> 00:54:38,579
And I am going to, I see
there's this open link here.
1268
00:54:39,000 --> 00:54:40,730
So I'm gonna go ahead,
I'm gonna open that.
1269
00:54:40,730 --> 00:54:44,640
Let's take a look and make
sure this is the right track.
1270
00:54:44,640 --> 00:54:48,150
I'm pretty sure it is, it
is not the right track.
1271
00:54:48,150 --> 00:54:51,247
What is this? Femme phan?
1272
00:54:51,247 --> 00:54:54,096
Maybe it's some other, some others.
1273
00:54:54,096 --> 00:54:57,090
So let's take a look.
Well, that's interesting.
1274
00:54:57,090 --> 00:54:58,860
So, oh, I just went to the bottom
1275
00:54:58,860 --> 00:54:59,730
instead of going to the top.
1276
00:54:59,730 --> 00:55:02,430
So I should have went to the
very top of these results
1277
00:55:04,050 --> 00:55:06,570
or I should have pulled,
probably pulled the name out.
1278
00:55:06,570 --> 00:55:09,600
Rock-a-bye, baby. There's a
Rock-a-bye baby version of this.
1279
00:55:09,600 --> 00:55:12,033
Whoop, okay, so when the color stops,
1280
00:55:12,930 --> 00:55:14,520
hope you're not getting
sick of all this scrolling.
1281
00:55:14,520 --> 00:55:17,040
So Beyonce is the artist that we want.
1282
00:55:17,040 --> 00:55:19,740
So this is the one, we
want to hear this song.
1283
00:55:19,740 --> 00:55:21,233
Let's see if I got the
right one this time.
1284
00:55:21,233 --> 00:55:22,980
This is just something, you know,
1285
00:55:22,980 --> 00:55:24,390
there's a lot of data coming back here.
1286
00:55:24,390 --> 00:55:27,000
It's kind of hard to do,
to use on the command line.
1287
00:55:27,000 --> 00:55:29,460
Sometimes I'm a little
cutsy like you just saw.
1288
00:55:29,460 --> 00:55:31,200
Here we go. Let's see what happens.
1289
00:55:31,200 --> 00:55:32,550
Let's make sure this is it.
1290
00:55:34,911 --> 00:55:37,410
There it is. There's Beyonce.
1291
00:55:37,410 --> 00:55:39,420
Not the song I was looking for.
1292
00:55:39,420 --> 00:55:41,520
Oh yeah, it is, "Who
Runs the World? Girls."
1293
00:55:41,520 --> 00:55:42,540
And now I can listen to that.
1294
00:55:42,540 --> 00:55:44,250
So it's like, who runs the world? Girls.
1295
00:55:44,250 --> 00:55:48,120
It's kinda like who
runs the terminal? Curl.
1296
00:55:48,120 --> 00:55:51,240
Boy, that was a big setup
just to make that joke.
1297
00:55:51,240 --> 00:55:55,080
I hope that you enjoyed
it. You can has dad joke.
1298
00:55:55,080 --> 00:55:57,780
Curl is an awesome way to
explore APIs and you'll find
1299
00:55:57,780 --> 00:55:59,680
that often, just like we saw with Spotify,
1300
00:55:59,680 --> 00:56:04,020
APIs will use Curl in their
docs to show you how they work.
1301
00:56:04,020 --> 00:56:05,610
Spotify is just one API and there are
1302
00:56:05,610 --> 00:56:07,680
so many companies and services out there.
1303
00:56:07,680 --> 00:56:10,230
In fact, some APIs are the product.
1304
00:56:10,230 --> 00:56:12,750
Like that's what the company's
selling to us developers.
1305
00:56:12,750 --> 00:56:15,600
So now that we've been
building up those muscles,
1306
00:56:15,600 --> 00:56:17,823
why don't we take a swing at another API?
1307
00:56:19,140 --> 00:56:22,217
Let's use a different API,
this time let's use Twilio.
1308
00:56:22,217 --> 00:56:25,170
Twilio is a company that loves APIs.
1309
00:56:25,170 --> 00:56:26,820
In fact, that's what
the company started as
1310
00:56:26,820 --> 00:56:29,700
more than a decade ago,
just a set of APIs.
1311
00:56:29,700 --> 00:56:32,490
It started as abstracting
away communication channels.
1312
00:56:32,490 --> 00:56:34,650
And by that I mean any way you'd ever
1313
00:56:34,650 --> 00:56:36,930
possibly want to
communicate with your users.
1314
00:56:36,930 --> 00:56:39,720
Wanna send a text message?
There's an API call for that.
1315
00:56:39,720 --> 00:56:41,430
Wanna make a phone call? There's an API.
1316
00:56:41,430 --> 00:56:43,170
Send an email, a WhatsApp message,
1317
00:56:43,170 --> 00:56:45,600
literally whichever way
you want to communicate,
1318
00:56:45,600 --> 00:56:47,550
there's an API for all of them.
1319
00:56:47,550 --> 00:56:49,620
Developers embed these
APIs into their apps
1320
00:56:49,620 --> 00:56:51,330
and I'm pretty sure that you've probably
1321
00:56:51,330 --> 00:56:53,640
used it without even knowing you were.
1322
00:56:53,640 --> 00:56:56,130
Now, nowadays there's a
whole suite of products
1323
00:56:56,130 --> 00:56:59,070
that Twilio offers that they
saw their customers needing.
1324
00:56:59,070 --> 00:57:00,331
But under the covers it's still
1325
00:57:00,331 --> 00:57:02,523
these APIs that are powering everything.
1326
00:57:03,810 --> 00:57:05,640
I need to be a little
upfront here with you.
1327
00:57:05,640 --> 00:57:08,190
I love Twilio, I mean, I love it so much,
1328
00:57:08,190 --> 00:57:11,220
I even applied for a job
with them and I got it.
1329
00:57:11,220 --> 00:57:13,260
But even if they didn't hire me,
1330
00:57:13,260 --> 00:57:16,890
I know that I'd still show off
how powerful their APIs are.
1331
00:57:16,890 --> 00:57:20,340
I mean, with a single command,
you can send a text message.
1332
00:57:20,340 --> 00:57:22,717
I remember when I first
did that, I was like, whoa.
1333
00:57:22,717 --> 00:57:25,200
Like that level of abstraction is amazing.
1334
00:57:25,200 --> 00:57:27,570
I mean if you've never
thought about it before,
1335
00:57:27,570 --> 00:57:28,890
what even is a text message?
1336
00:57:28,890 --> 00:57:31,140
I mean, I know I have an
app on my phone and I can
1337
00:57:31,140 --> 00:57:33,150
use it to communicate with
literally anyone else.
1338
00:57:33,150 --> 00:57:34,890
But how does that work?
1339
00:57:34,890 --> 00:57:35,880
Like there's all those different
1340
00:57:35,880 --> 00:57:38,880
cell carriers and standards
and phone numbers.
1341
00:57:38,880 --> 00:57:40,380
I mean, I have no idea.
1342
00:57:40,380 --> 00:57:42,450
And with Twilio, I don't need to know.
1343
00:57:42,450 --> 00:57:43,590
That's the beauty of this API.
1344
00:57:43,590 --> 00:57:45,717
It just works here, let me show you.
1345
00:57:45,717 --> 00:57:50,341
All right, so here we are
at twilio.com and again,
1346
00:57:50,341 --> 00:57:52,710
word of warning, this is going to look
1347
00:57:52,710 --> 00:57:55,744
completely different from my
right now to your right now.
1348
00:57:55,744 --> 00:57:58,710
So please make sure that you
check the notes for anything
1349
00:57:58,710 --> 00:58:01,230
that might have changed
and is specifically about
1350
00:58:01,230 --> 00:58:03,090
this flow that we're
about ready to do 'cause
1351
00:58:03,090 --> 00:58:05,370
we're going to sign up
for a trial account.
1352
00:58:05,370 --> 00:58:06,960
So I'm gonna click the Sign Up button here
1353
00:58:06,960 --> 00:58:08,790
and this is going to look
completely different.
1354
00:58:08,790 --> 00:58:11,520
I know because our team is
constantly making this better.
1355
00:58:11,520 --> 00:58:13,380
But the one thing that I
wanna make sure that you know
1356
00:58:13,380 --> 00:58:15,270
right now is that you see that there is no
1357
00:58:15,270 --> 00:58:18,540
credit card required and it
is a free Twilio account.
1358
00:58:18,540 --> 00:58:20,770
So I'm gonna put my information in here
1359
00:58:21,960 --> 00:58:26,100
and I'm gonna use the same
trick that I used before
1360
00:58:26,100 --> 00:58:30,077
where I do plus and I'm gonna
say, "APIcourseV2@gmail.com."
1361
00:58:33,180 --> 00:58:36,753
So, the plus sign there
again, the little Gmail trick,
1362
00:58:37,890 --> 00:58:40,650
we're gonna go ahead, I'm
gonna put in my password again.
1363
00:58:40,650 --> 00:58:43,350
1, 2, 3, 4, 5, 6, my luggage.
1364
00:58:43,350 --> 00:58:44,183
How many times can I do that joke?
1365
00:58:44,183 --> 00:58:47,400
And then I gonna do this accept,
1366
00:58:47,400 --> 00:58:48,990
must be 16 or more characters.
1367
00:58:48,990 --> 00:58:52,593
Okay, there's some password
requirements over there.
1368
00:58:58,050 --> 00:59:00,693
I think that's 16. All right, here we go.
1369
00:59:01,890 --> 00:59:03,513
Starting my free trial.
1370
00:59:05,700 --> 00:59:07,803
I'm ready. Let's do this.
1371
00:59:10,020 --> 00:59:12,480
I'm definitely gonna
save that long password
1372
00:59:12,480 --> 00:59:13,830
'cause I need that for later.
1373
00:59:13,830 --> 00:59:17,910
All right, so I have now
should have been sent an email.
1374
00:59:17,910 --> 00:59:22,910
So let me make sure that I
got that email and I did,
1375
00:59:23,250 --> 00:59:26,580
I am going to click the link
to verify it and here we go.
1376
00:59:26,580 --> 00:59:29,490
I'm gonna verify my phone number to verify
1377
00:59:29,490 --> 00:59:31,170
I'm a human 'cause all humans have phones.
1378
00:59:31,170 --> 00:59:35,940
So we're gonna do (432)-527-4274.
1379
00:59:35,940 --> 00:59:38,190
Please don't call too late.
1380
00:59:38,190 --> 00:59:40,830
I'm gonna try that.
I'm gonna click Verify.
1381
00:59:40,830 --> 00:59:42,420
All right, so I got my verification code.
1382
00:59:42,420 --> 00:59:44,820
Hey that came very quickly.
1383
00:59:44,820 --> 00:59:49,097
Well that's wonderful, my
verification code is 017869.
1384
00:59:54,030 --> 00:59:54,863
Hopefully your code's different than that.
1385
00:59:54,863 --> 00:59:57,270
Wouldn't they be funny if
they were all the same?
1386
00:59:57,270 --> 00:59:58,800
All right, so here we go.
1387
00:59:58,800 --> 01:00:01,170
So which product are we here
to use? We're gonna use SMS.
1388
01:00:01,170 --> 01:00:03,040
We're gonna use the SMS messaging product
1389
01:00:03,040 --> 01:00:05,670
and what do we plan to build?
1390
01:00:05,670 --> 01:00:07,290
Let's see the, of course,
1391
01:00:07,290 --> 01:00:09,245
these questions are gonna be different.
1392
01:00:09,245 --> 01:00:10,110
What are we gonna do?
1393
01:00:10,110 --> 01:00:14,280
We're gonna build, what?
Build something else.
1394
01:00:14,280 --> 01:00:15,586
We're gonna build something else,
1395
01:00:15,586 --> 01:00:18,540
how do we wanna build with
Twilio, with code, right?
1396
01:00:18,540 --> 01:00:20,220
So we are gonna end up
writing code if we want to
1397
01:00:20,220 --> 01:00:22,800
with minimal code on top of
code samples or no code at all.
1398
01:00:22,800 --> 01:00:25,140
So, definitely don't need
code to build over here
1399
01:00:25,140 --> 01:00:28,140
but I'm gonna say with code
'cause we're developers here.
1400
01:00:28,140 --> 01:00:30,270
So what is your preferred coding language?
1401
01:00:30,270 --> 01:00:32,480
We're gonna do JavaScript
even if it's not,
1402
01:00:32,480 --> 01:00:35,460
we're gonna be doing JavaScript
for the rest of this course
1403
01:00:35,460 --> 01:00:38,190
and I do want to host my code
on Twilio, which is nice.
1404
01:00:38,190 --> 01:00:40,740
There's a nice serverless option.
1405
01:00:40,740 --> 01:00:42,720
These options, like I said
are totally going to change.
1406
01:00:42,720 --> 01:00:45,450
Just try to answer them
as truthfully as you can.
1407
01:00:45,450 --> 01:00:48,570
So, and my building country is
United States, which is true.
1408
01:00:48,570 --> 01:00:52,337
And I'm gonna get started. I'm
gonna go ahead and walk this.
1409
01:00:55,590 --> 01:00:58,260
I guess let's go ahead and so
we'll I can explore products.
1410
01:00:58,260 --> 01:00:59,670
There's way more products that
1411
01:00:59,670 --> 01:01:00,840
are available than you can see here.
1412
01:01:00,840 --> 01:01:02,640
This is what got built based on the menu
1413
01:01:02,640 --> 01:01:04,050
of what they thought,
but if I ever want to,
1414
01:01:04,050 --> 01:01:05,910
I can come to this Explore
Products and get more,
1415
01:01:05,910 --> 01:01:06,743
we probably won't need to do that
1416
01:01:06,743 --> 01:01:08,460
'cause we filled out what we're gonna do.
1417
01:01:08,460 --> 01:01:10,230
And this is where you can
get access to your logs.
1418
01:01:10,230 --> 01:01:11,460
I'll show that off here in a bit.
1419
01:01:11,460 --> 01:01:14,213
If there's any problems you'll
be able to find them there.
1420
01:01:15,150 --> 01:01:16,230
Manage your account keys
1421
01:01:16,230 --> 01:01:17,610
and build trust with your customers.
1422
01:01:17,610 --> 01:01:19,770
Yeah, we can build all sorts
of different things in here.
1423
01:01:19,770 --> 01:01:21,290
We probably won't need to do too much here
1424
01:01:21,290 --> 01:01:23,910
'cause most of the keys
that we have are available
1425
01:01:23,910 --> 01:01:26,189
to us right from this page
that we're on actually.
1426
01:01:26,189 --> 01:01:29,517
So we'll keep going and I can
see the billing and again,
1427
01:01:29,517 --> 01:01:31,260
you're in a trial account and I think
1428
01:01:31,260 --> 01:01:34,320
you get something like $15 to try with.
1429
01:01:34,320 --> 01:01:37,350
So we'll be sending a text
messages using that trial.
1430
01:01:37,350 --> 01:01:40,380
Dollar dollar bills,
y'all. So, here we go.
1431
01:01:40,380 --> 01:01:42,150
And then you can switch between products.
1432
01:01:42,150 --> 01:01:43,410
So you can have multiple accounts, right?
1433
01:01:43,410 --> 01:01:45,600
So if you wanted to come and
like explore a little bit,
1434
01:01:45,600 --> 01:01:46,470
do your own personal thing,
1435
01:01:46,470 --> 01:01:49,350
maybe do something for
work later, up to you.
1436
01:01:49,350 --> 01:01:51,390
There's a 1550 is what we got. All right.
1437
01:01:51,390 --> 01:01:55,032
So, and then I'll click
Next and then I can,
1438
01:01:55,032 --> 01:01:57,780
anytime I want to, I can look
at this tour again to help
1439
01:01:57,780 --> 01:02:02,160
navigate around, which is
really nice, beautiful console.
1440
01:02:02,160 --> 01:02:06,240
So we could definitely go
ahead and the first thing
1441
01:02:06,240 --> 01:02:10,593
that we wanna do is we want
to get a Twilio phone number.
1442
01:02:11,970 --> 01:02:12,803
So I'm gonna do that.
1443
01:02:12,803 --> 01:02:14,703
I'm gonna click this,
Get Twilio Phone Number.
1444
01:02:16,980 --> 01:02:18,870
And I am so glad that this happened to me.
1445
01:02:18,870 --> 01:02:21,060
It says that this account
has been restricted
1446
01:02:21,060 --> 01:02:23,430
from provisioning new phone numbers,
1447
01:02:23,430 --> 01:02:25,800
which means that thinks
that I might be spam.
1448
01:02:25,800 --> 01:02:27,600
And you know why it is, it's because I put
1449
01:02:27,600 --> 01:02:29,970
that Gmail account with a
little plus thing there.
1450
01:02:29,970 --> 01:02:31,410
So if this happens to
you, I don't want you
1451
01:02:31,410 --> 01:02:33,617
to feel offended or anything like that.
1452
01:02:33,617 --> 01:02:35,100
I want you to check the notes
1453
01:02:35,100 --> 01:02:37,050
for the latest ways to get around this.
1454
01:02:37,050 --> 01:02:39,032
And also I'm going to go
right now and I'm going
1455
01:02:39,032 --> 01:02:42,930
to email compliancereview@twilio.com
1456
01:02:42,930 --> 01:02:44,910
and I should get that up and running.
1457
01:02:44,910 --> 01:02:46,920
If this happens to you,
go ahead, press Pause,
1458
01:02:46,920 --> 01:02:49,440
check the notes here for what to do.
1459
01:02:49,440 --> 01:02:51,720
And I'm going to actually do that.
1460
01:02:51,720 --> 01:02:52,553
I'm gonna press Pause here.
1461
01:02:52,553 --> 01:02:55,560
I'm gonna get my account
able to get a phone number
1462
01:02:55,560 --> 01:02:59,490
and I will see you back
here in one second.
1463
01:02:59,490 --> 01:03:01,890
All right, so I got all sorted out.
1464
01:03:01,890 --> 01:03:04,880
So I sent my email to the compliance folks
1465
01:03:04,880 --> 01:03:07,237
and I was able to say that I was doing
1466
01:03:07,237 --> 01:03:09,930
a personal account and
I'm learning how to use
1467
01:03:09,930 --> 01:03:13,380
these APIs and they were
able to let me get in here.
1468
01:03:13,380 --> 01:03:16,050
So what I'm gonna do
now is when I click this
1469
01:03:16,050 --> 01:03:18,300
Get a Twilio Phone Number,
we're not going to see
1470
01:03:18,300 --> 01:03:21,000
that message 'cause I'm
coming in and I've got
1471
01:03:21,000 --> 01:03:22,530
a new phone number and it automatically
1472
01:03:22,530 --> 01:03:25,590
gave me this one, this one here, this 561.
1473
01:03:25,590 --> 01:03:27,600
It went away really
quick, but it's down here.
1474
01:03:27,600 --> 01:03:31,530
This is my Twilio phone
number, this (561) 816-5433.
1475
01:03:33,150 --> 01:03:36,300
Now this number is mine, which is awesome.
1476
01:03:36,300 --> 01:03:38,970
I can use this message,
I can send messages,
1477
01:03:38,970 --> 01:03:40,281
I can receive messages,
1478
01:03:40,281 --> 01:03:42,000
I can do all sorts of things with this.
1479
01:03:42,000 --> 01:03:43,720
I can make calls, I can receive calls.
1480
01:03:43,720 --> 01:03:47,250
This Twilio phone number
is mine to play with.
1481
01:03:47,250 --> 01:03:48,210
I think we should do just that.
1482
01:03:48,210 --> 01:03:49,860
We should send a text message.
1483
01:03:49,860 --> 01:03:52,200
Now before we get started,
1484
01:03:52,200 --> 01:03:54,176
I wanna make sure that
you know this stuff,
1485
01:03:54,176 --> 01:03:56,280
you are on a trial account.
1486
01:03:56,280 --> 01:03:57,480
So there are some limitations.
1487
01:03:57,480 --> 01:03:58,920
You can only send messages
1488
01:03:58,920 --> 01:04:00,870
and make calls to verified phone numbers.
1489
01:04:00,870 --> 01:04:02,940
So when we set things up, we've verified,
1490
01:04:02,940 --> 01:04:04,410
like I'm able to send a text to myself
1491
01:04:04,410 --> 01:04:06,079
because I verified my phone number.
1492
01:04:06,079 --> 01:04:07,057
I mean, and it will say,
1493
01:04:07,057 --> 01:04:08,959
"Sent from my Twilio account," beforehand.
1494
01:04:08,959 --> 01:04:10,920
And there's more things
about your trial account too
1495
01:04:10,920 --> 01:04:12,112
if you wanted it to get into that.
1496
01:04:12,112 --> 01:04:15,931
So, check the notes because
this very well could
1497
01:04:15,931 --> 01:04:18,843
have changed, but check
the notes for more on this.
1498
01:04:20,250 --> 01:04:25,250
So let's do it. Let's send a
short message service, an SMS.
1499
01:04:25,800 --> 01:04:28,080
So I'm gonna click here
on this Docs and Support
1500
01:04:28,080 --> 01:04:29,370
and I'm gonna click
this, it's gonna open up,
1501
01:04:29,370 --> 01:04:32,160
I'm gonna go these developer
docs, these developer docs
1502
01:04:32,160 --> 01:04:35,820
are some of the best that
are available out there.
1503
01:04:35,820 --> 01:04:37,170
I want you to see these.
1504
01:04:37,170 --> 01:04:39,390
So we're gonna come in here under SMS
1505
01:04:39,390 --> 01:04:40,223
'cause that's what we're doing, right?
1506
01:04:40,223 --> 01:04:43,680
Short message service, and
under here, under these,
1507
01:04:43,680 --> 01:04:46,710
these sides on the docs
here, you can collapse these.
1508
01:04:46,710 --> 01:04:48,570
So I'm gonna come in
here under API reference.
1509
01:04:48,570 --> 01:04:50,643
I'm gonna go to this message resource.
1510
01:04:52,530 --> 01:04:55,170
Now this is an API, right?
1511
01:04:55,170 --> 01:04:56,850
So we're in the API reference.
1512
01:04:56,850 --> 01:04:59,580
So the API that we want
to do is we wanna be able
1513
01:04:59,580 --> 01:05:03,564
to send from, and we wanna
say from the phone number
1514
01:05:03,564 --> 01:05:05,460
that we just got and we wanna send
1515
01:05:05,460 --> 01:05:06,990
a message to my phone number, right?
1516
01:05:06,990 --> 01:05:09,212
So we're gonna do that and you'll see that
1517
01:05:09,212 --> 01:05:12,780
over here on the right, there are things
1518
01:05:12,780 --> 01:05:14,940
that you can do that
show you what you can do.
1519
01:05:14,940 --> 01:05:17,891
So with this message we can
do all these different things.
1520
01:05:17,891 --> 01:05:19,530
We'll start with creative message,
1521
01:05:19,530 --> 01:05:20,460
we'll create a message first.
1522
01:05:20,460 --> 01:05:22,851
So we're gonna go into
this, create a message
1523
01:05:22,851 --> 01:05:25,290
and there's these
different languages here.
1524
01:05:25,290 --> 01:05:27,930
So we have no JS and you can see the style
1525
01:05:27,930 --> 01:05:29,430
that it looks like, we'll take a look at
1526
01:05:29,430 --> 01:05:30,963
something like this here real shortly.
1527
01:05:30,963 --> 01:05:33,630
This is a helper library
that wraps around the API.
1528
01:05:33,630 --> 01:05:35,550
So you don't need to
do the sorts of things
1529
01:05:35,550 --> 01:05:38,737
that we're about ready to have to do.
1530
01:05:38,737 --> 01:05:40,860
You can do things a
little bit more cleanly.
1531
01:05:40,860 --> 01:05:42,360
But what we're gonna
look at is Curl, right?
1532
01:05:42,360 --> 01:05:43,650
So here's our friend, Curl.
1533
01:05:43,650 --> 01:05:46,380
We're gonna jump over here to
Curl and the docs have this
1534
01:05:46,380 --> 01:05:48,630
really nice thing where I'm
able to actually copy this.
1535
01:05:48,630 --> 01:05:50,367
So I'm gonna click to copy this
1536
01:05:50,367 --> 01:05:52,440
and I'm gonna pop over to my terminal.
1537
01:05:52,440 --> 01:05:55,230
Now again, I'm running on a Mac.
1538
01:05:55,230 --> 01:05:57,870
So there's a couple of things
here that this is assuming
1539
01:05:57,870 --> 01:06:01,139
that it's going to be okay
because I am running on a Mac.
1540
01:06:01,139 --> 01:06:04,260
It's going to assume that these slashes,
1541
01:06:04,260 --> 01:06:08,520
see these slashes at the end
here, these on a Mac terminal,
1542
01:06:08,520 --> 01:06:10,344
these show that we are in the new,
1543
01:06:10,344 --> 01:06:12,809
we're making a new line available here.
1544
01:06:12,809 --> 01:06:14,460
And also you'll see that there's
1545
01:06:14,460 --> 01:06:16,800
these account SIDs and these Auth tokens.
1546
01:06:16,800 --> 01:06:19,391
This dollar sign Twilio
Auth token, dollar sign,
1547
01:06:19,391 --> 01:06:22,890
Twilio Account SID, in my terminal,
1548
01:06:22,890 --> 01:06:24,777
on my Mac, that is what's known as an
1549
01:06:24,777 --> 01:06:27,630
environment variable and they've been set.
1550
01:06:27,630 --> 01:06:30,300
Now I don't have those set currently
1551
01:06:30,300 --> 01:06:31,950
because I just built this account.
1552
01:06:31,950 --> 01:06:36,120
So what I'm gonna do is kind
of bad practice actually,
1553
01:06:36,120 --> 01:06:38,070
I'm gonna actually put my
1554
01:06:38,070 --> 01:06:41,130
real information here for us to use.
1555
01:06:41,130 --> 01:06:44,280
So, back here on our console,
1556
01:06:44,280 --> 01:06:46,590
on our Twilio console you'll
see that I have this thing here
1557
01:06:46,590 --> 01:06:50,490
called this account SID
or String Identifier.
1558
01:06:50,490 --> 01:06:52,200
So this is my ID,
1559
01:06:52,200 --> 01:06:55,050
my unique ID for the
account that I just created.
1560
01:06:55,050 --> 01:06:57,300
So I'm gonna go ahead and I'm
gonna click this Copy button.
1561
01:06:57,300 --> 01:06:59,501
So I copied that, I'm gonna come back here
1562
01:06:59,501 --> 01:07:02,190
and I'm gonna move my mouse and I'm gonna
1563
01:07:02,190 --> 01:07:04,230
remove right here where
it says account SID.
1564
01:07:04,230 --> 01:07:06,893
So that's string identifier.
I'm going to paste this.
1565
01:07:06,893 --> 01:07:10,890
So that is the way that Twilio
is identifying who I am.
1566
01:07:10,890 --> 01:07:12,780
I'm gonna go backwards
through the rest of these.
1567
01:07:12,780 --> 01:07:14,610
And so if you're watching here on Windows,
1568
01:07:14,610 --> 01:07:16,410
let's just go ahead,
let's get rid of these,
1569
01:07:16,410 --> 01:07:18,390
these new lines here.
1570
01:07:18,390 --> 01:07:21,390
So I'm gonna just put
them all on one line,
1571
01:07:21,390 --> 01:07:22,680
we can handle that, we'll do that.
1572
01:07:22,680 --> 01:07:26,922
So I'm gonna get rid of
that line and that way
1573
01:07:26,922 --> 01:07:30,865
it will work completely on both Windows
1574
01:07:30,865 --> 01:07:34,290
and Mac for what we're trying to do.
1575
01:07:34,290 --> 01:07:36,840
So I still have my account SID here,
1576
01:07:36,840 --> 01:07:38,640
so I'm gonna keep on backing up here
1577
01:07:41,610 --> 01:07:44,520
and I'm going to get rid
of that line, there we go.
1578
01:07:44,520 --> 01:07:45,990
And you'll see one more time here,
1579
01:07:45,990 --> 01:07:47,700
there's the Twilio account SID,
1580
01:07:47,700 --> 01:07:50,280
that string identifier for
my account was still present.
1581
01:07:50,280 --> 01:07:51,570
So I'm gonna paste that there.
1582
01:07:51,570 --> 01:07:53,872
So now the API call that I'm doing is to
1583
01:07:53,872 --> 01:07:56,637
that specific account,
it's due to this messages
1584
01:07:56,637 --> 01:07:59,670
and you'll note that it's
doing, now it's doing a post.
1585
01:07:59,670 --> 01:08:02,010
So because we're creating
something new, right?
1586
01:08:02,010 --> 01:08:05,220
So we're using post to create a message
1587
01:08:05,220 --> 01:08:08,010
and you'll see here
that it says from equals
1588
01:08:08,010 --> 01:08:11,340
and the number actually there
for the from, we want that
1589
01:08:11,340 --> 01:08:13,980
to be the Twilio number
that we just got, right?
1590
01:08:13,980 --> 01:08:15,415
So that new one that we just got,
1591
01:08:15,415 --> 01:08:20,415
we're gonna say that is
sent from, let me go back,
1592
01:08:23,010 --> 01:08:25,830
I'm gonna copy my Twilio
phone number, right?
1593
01:08:25,830 --> 01:08:28,497
So I've got my 561 number there
1594
01:08:28,497 --> 01:08:30,930
and I'm gonna paste that here.
1595
01:08:30,930 --> 01:08:35,930
So you know from and this
plus 561, that's a US number.
1596
01:08:38,340 --> 01:08:42,750
So it's got the, it's called
a 10 digit long code, 10 DLC.
1597
01:08:42,750 --> 01:08:46,769
So it's (561)-816-5433 is the
number that I just bought.
1598
01:08:46,769 --> 01:08:50,536
And we're gonna say by
default it said, "Hi there,"
1599
01:08:50,536 --> 01:08:52,440
the body of the message, right?
1600
01:08:52,440 --> 01:08:54,207
So we're, instead of that,
whatever we're gonna do
1601
01:08:54,207 --> 01:08:55,795
and note that this is all in quotes
1602
01:08:55,795 --> 01:08:57,510
and we're gonna say, "Ahoy world."
1603
01:08:57,510 --> 01:09:00,540
I don't know if you know this
or not, but the first word,
1604
01:09:00,540 --> 01:09:04,516
the way that we used to
answer the phone was we'd say
1605
01:09:04,516 --> 01:09:06,540
the phone would ring and
you'd be like, "Ahoy?"
1606
01:09:06,540 --> 01:09:08,670
And the other side would go, "Ahoy-hoy."
1607
01:09:08,670 --> 01:09:09,503
So we like to do that here a lot,
1608
01:09:09,503 --> 01:09:11,613
at Twilio we say "Ahoy world."
1609
01:09:11,613 --> 01:09:13,470
It's kinda like the hello world of this.
1610
01:09:13,470 --> 01:09:15,870
So the body of the message,
the text that we're going
1611
01:09:15,870 --> 01:09:18,893
to get is gonna say "Ahoy
world" and then we're gonna
1612
01:09:18,893 --> 01:09:21,930
send it, I'm gonna send
it to my phone number.
1613
01:09:21,930 --> 01:09:24,600
So this is one of those
numbers that you verified
1614
01:09:24,600 --> 01:09:25,800
right when you created your account,
1615
01:09:25,800 --> 01:09:27,750
you verified that you had a number.
1616
01:09:27,750 --> 01:09:31,800
So my phone number is (432)-527-4274.
1617
01:09:33,090 --> 01:09:35,850
Don't text too late at
night please, and then
1618
01:09:35,850 --> 01:09:38,460
the final thing that we have
here is this Auth token.
1619
01:09:38,460 --> 01:09:41,430
Now this is a very private key, right?
1620
01:09:41,430 --> 01:09:43,320
We don't ever want anybody to have access.
1621
01:09:43,320 --> 01:09:45,330
This is like that Spotify
token that we had, right?
1622
01:09:45,330 --> 01:09:47,280
We don't ever want anybody to have it.
1623
01:09:47,280 --> 01:09:50,277
I am going to, I trust
you and I'm gonna go ahead
1624
01:09:50,277 --> 01:09:53,580
and I'm gonna paste that
here so that we have it.
1625
01:09:53,580 --> 01:09:57,151
So that is something that you never wanna
1626
01:09:57,151 --> 01:09:59,580
let out 'cause now you could seeing this
1627
01:09:59,580 --> 01:10:02,190
on my screen, you could use this, right?
1628
01:10:02,190 --> 01:10:05,340
And you probably don't
want anybody doing that.
1629
01:10:05,340 --> 01:10:07,500
So you never wanna actually
give that number out.
1630
01:10:07,500 --> 01:10:09,330
You wanna hide that and we'll talk
1631
01:10:09,330 --> 01:10:11,460
about how to do that
more here in the future.
1632
01:10:11,460 --> 01:10:12,600
But right now I just wanted to show you,
1633
01:10:12,600 --> 01:10:15,300
we're gonna use Curl,
we are going to create,
1634
01:10:15,300 --> 01:10:18,030
we're gonna send a post to this URL here
1635
01:10:18,030 --> 01:10:19,650
and you'll notice that ends in JSON.
1636
01:10:19,650 --> 01:10:20,790
So that's what we're gonna get back.
1637
01:10:20,790 --> 01:10:21,930
That's the way that it works.
1638
01:10:21,930 --> 01:10:24,060
This is to my account, my account SID,
1639
01:10:24,060 --> 01:10:25,886
you see it starts with this AC
1640
01:10:25,886 --> 01:10:30,510
and we're gonna post using
this data URL encode.
1641
01:10:30,510 --> 01:10:33,034
So the way that the Twilio
API works is it takes
1642
01:10:33,034 --> 01:10:36,930
some parameters, it takes from body and to
1643
01:10:36,930 --> 01:10:38,670
and the way that you pass those in curl is
1644
01:10:38,670 --> 01:10:41,195
with this --data URL encode and you pass
1645
01:10:41,195 --> 01:10:44,730
what it is that you want
to have go across here.
1646
01:10:44,730 --> 01:10:46,710
So we're gonna, if all of this works,
1647
01:10:46,710 --> 01:10:48,900
I should get a message back.
1648
01:10:48,900 --> 01:10:50,340
I should get a text message on
1649
01:10:50,340 --> 01:10:54,000
my actual phone that says "Ahoy world."
1650
01:10:54,000 --> 01:10:54,833
Let's do it,
1651
01:10:57,147 --> 01:10:59,820
and it looks like I'm
missing a quote someplace.
1652
01:10:59,820 --> 01:11:02,193
So where is the quote that I'm missing?
1653
01:11:05,070 --> 01:11:08,013
I don't see a missing quote.
1654
01:11:16,020 --> 01:11:18,540
I can go press the up arrow,
maybe it will show up.
1655
01:11:18,540 --> 01:11:20,430
Yeah. Oh, right.
1656
01:11:20,430 --> 01:11:22,800
You know how many times I do that?
1657
01:11:22,800 --> 01:11:24,717
The ahoy world, the exclamation point
1658
01:11:24,717 --> 01:11:28,020
is something that you
need to typically escape.
1659
01:11:28,020 --> 01:11:29,547
So I'm just gonna say "Ahoy world"
1660
01:11:29,547 --> 01:11:31,830
with a single quote there.
1661
01:11:31,830 --> 01:11:33,780
So, if you're having that problem,
1662
01:11:33,780 --> 01:11:35,010
sorry, that's what that was.
1663
01:11:35,010 --> 01:11:38,007
So I pressed the up arrow to
get my information back there
1664
01:11:38,007 --> 01:11:41,490
and now if all is going
well and I press Send,
1665
01:11:41,490 --> 01:11:44,160
we should get a text, here we go.
1666
01:11:44,160 --> 01:11:46,440
And so I got this message back, I got this
1667
01:11:46,440 --> 01:11:50,250
and sure enough, here it is, I got it.
1668
01:11:50,250 --> 01:11:52,227
And you can see here it says
at the front of the body
1669
01:11:52,227 --> 01:11:56,193
that it says it says, "Sent
from your Twilio trial account,"
1670
01:11:56,193 --> 01:11:57,810
which is fine, we're in a trial account,
1671
01:11:57,810 --> 01:12:00,420
that's totally fine, but I
did and boom, I got it on
1672
01:12:00,420 --> 01:12:03,510
my actual phone, I got that
message, which is awesome.
1673
01:12:03,510 --> 01:12:06,270
We now have the ability to send a
1674
01:12:06,270 --> 01:12:08,490
text message from the command line, right?
1675
01:12:08,490 --> 01:12:09,440
That's pretty cool.
1676
01:12:10,350 --> 01:12:12,240
Let's take this a step farther actually.
1677
01:12:12,240 --> 01:12:15,990
So we know that that
API, when I did a post,
1678
01:12:15,990 --> 01:12:17,944
I was able to get information back.
1679
01:12:17,944 --> 01:12:21,510
I'm gonna go ahead now and I'm
gonna do just bring that back
1680
01:12:21,510 --> 01:12:23,997
and I'm gonna get rid of all
of these parameters here.
1681
01:12:23,997 --> 01:12:26,850
I'm gonna get rid of the
from, the body, and the to
1682
01:12:26,850 --> 01:12:28,560
and I'm gonna change, I'm gonna make that,
1683
01:12:28,560 --> 01:12:33,360
I'm gonna do a get and let me
show you what that looks like.
1684
01:12:33,360 --> 01:12:34,890
So I'm gonna get rid of
all of those parameters,
1685
01:12:34,890 --> 01:12:37,110
I'm gonna keep that same
URL and it still has my
1686
01:12:37,110 --> 01:12:40,309
account SID there, right in
there and instead of a post,
1687
01:12:40,309 --> 01:12:42,570
what we're gonna do is
we're gonna do a get,
1688
01:12:42,570 --> 01:12:44,294
what we should do is we should get back
1689
01:12:44,294 --> 01:12:46,410
all of the messages that are there.
1690
01:12:46,410 --> 01:12:48,117
So I'm gonna hit this kinda
like a message log, right?
1691
01:12:48,117 --> 01:12:50,718
So these are all the
messages that have been sent,
1692
01:12:50,718 --> 01:12:52,170
which is awesome, here it is,
1693
01:12:52,170 --> 01:12:53,340
sent from your Twilio trial account.
1694
01:12:53,340 --> 01:12:54,600
So, and actually I can make this look
1695
01:12:54,600 --> 01:12:57,330
a little bit prettier
like we saw with JQ again,
1696
01:12:57,330 --> 01:12:58,901
totally optional in the
notes if you want it.
1697
01:12:58,901 --> 01:12:59,850
Yeah, there we go.
1698
01:12:59,850 --> 01:13:02,460
So you can see that I've
got some information
1699
01:13:02,460 --> 01:13:04,770
that's sent back here and
you can see that the message
1700
01:13:04,770 --> 01:13:07,710
that was sent in was sent
outbound to my phone number
1701
01:13:07,710 --> 01:13:11,370
to me from that number,
which is awesome, right?
1702
01:13:11,370 --> 01:13:14,160
And like I said, curl's
a little bit challenging
1703
01:13:14,160 --> 01:13:15,600
because it's gonna be
a little bit different
1704
01:13:15,600 --> 01:13:18,337
if you're in Microsoft
Windows or if you're in Mac.
1705
01:13:18,337 --> 01:13:20,790
I tried to make that as
comfortable as possible
1706
01:13:20,790 --> 01:13:22,920
but I you saw that I did
run into a couple of things
1707
01:13:22,920 --> 01:13:24,360
like I couldn't use the exclamation point
1708
01:13:24,360 --> 01:13:26,820
and things like that and
it's a little clumsy.
1709
01:13:26,820 --> 01:13:31,820
So stay tuned 'cause there are
more tools coming your way.
1710
01:13:32,010 --> 01:13:34,470
Awesome job getting that
running from your local machine.
1711
01:13:34,470 --> 01:13:36,000
It feels pretty good doesn't it?
1712
01:13:36,000 --> 01:13:38,940
What a cool skill you have now,
you can send a text message
1713
01:13:38,940 --> 01:13:41,130
from your machine with
just a single command.
1714
01:13:41,130 --> 01:13:42,990
Now believe me, this is just the tip
1715
01:13:42,990 --> 01:13:44,490
of the iceberg of what you can do.
1716
01:13:44,490 --> 01:13:46,870
There are so many more
Twilio APIs available
1717
01:13:46,870 --> 01:13:50,010
and now I know that you
can explore them with Curl.
1718
01:13:50,010 --> 01:13:52,950
For now though, let's take
things another step deeper.
1719
01:13:52,950 --> 01:13:55,260
Now I don't know about you
but I'm a little clumsy
1720
01:13:55,260 --> 01:13:57,030
when it comes to long
commands on the terminal
1721
01:13:57,030 --> 01:13:58,410
like we just did with Curl.
1722
01:13:58,410 --> 01:14:02,130
When exploring APIs, I really
like to lean on visual tools.
1723
01:14:02,130 --> 01:14:04,770
If you don't mind, I'd love
to show you some, that is,
1724
01:14:04,770 --> 01:14:07,040
of course, right after
you take a quick break.
1725
01:14:07,040 --> 01:14:09,707
(upbeat music)
1726
01:14:22,440 --> 01:14:25,020
There are a few tools that I
rely upon when it's time for me
1727
01:14:25,020 --> 01:14:27,537
to explore new APIs and I
thought I'd share 'em with you.
1728
01:14:27,537 --> 01:14:29,069
I used these to dive in and get
1729
01:14:29,069 --> 01:14:31,590
my hands dirty and organize my learnings.
1730
01:14:31,590 --> 01:14:34,050
One of the most famous
tools and one that you've
1731
01:14:34,050 --> 01:14:36,900
probably already heard
of is called "Postman."
1732
01:14:36,900 --> 01:14:39,240
Do you get it? Postman.
1733
01:14:39,240 --> 01:14:40,590
In addition to being a pretty good pun,
1734
01:14:40,590 --> 01:14:43,560
it's also a powerhouse of features.
1735
01:14:43,560 --> 01:14:45,660
Postman started as a Chrome
extension that let you
1736
01:14:45,660 --> 01:14:48,120
make API calls and what
it's turned into is
1737
01:14:48,120 --> 01:14:50,840
a powerful enterprise ready
tool with all sorts of bells
1738
01:14:50,840 --> 01:14:53,370
and whistles and even
shareable collections
1739
01:14:53,370 --> 01:14:55,350
for the most popular
APIs that are out there.
1740
01:14:55,350 --> 01:14:57,816
It's jam-packed full of features
1741
01:14:57,816 --> 01:15:00,696
and in my humble opinion,
you probably don't need
1742
01:15:00,696 --> 01:15:03,480
all that just yet in
your learning journey.
1743
01:15:03,480 --> 01:15:06,328
There are entire courses on
how to properly wield its power
1744
01:15:06,328 --> 01:15:09,060
and I've linked to a few
of those in the notes.
1745
01:15:09,060 --> 01:15:11,400
There are other tools
popping up all the time
1746
01:15:11,400 --> 01:15:13,850
that allow you to explore
APIs and store your notes.
1747
01:15:13,850 --> 01:15:15,630
I like to think of these apps as
1748
01:15:15,630 --> 01:15:17,820
the built in the vein of postman.
1749
01:15:17,820 --> 01:15:19,710
There's a whole genre of video games
1750
01:15:19,710 --> 01:15:21,690
that gets dubbed Metroidvania,
1751
01:15:21,690 --> 01:15:24,210
because they're similar to
"Metroid" and "Castlevania."
1752
01:15:24,210 --> 01:15:29,210
Now these apps are
Postmanvania, Postman-esque.
1753
01:15:29,640 --> 01:15:31,140
Let me show you an example.
1754
01:15:31,140 --> 01:15:32,880
I just bought this lamp here, it's rad,
1755
01:15:32,880 --> 01:15:34,290
it's from Govee and it's got this app
1756
01:15:34,290 --> 01:15:36,150
that I can use to control it on my phone.
1757
01:15:36,150 --> 01:15:37,560
I can change the colors, right,
1758
01:15:37,560 --> 01:15:40,489
and I can even make it
dance to my beatbox.
1759
01:15:40,489 --> 01:15:43,406
(Craig beatboxing)
1760
01:15:46,140 --> 01:15:48,270
It also has an API.
1761
01:15:48,270 --> 01:15:51,450
These are the docs here and
as I explore these docs,
1762
01:15:51,450 --> 01:15:54,282
I'm gonna save them in one
of these postman esque tools
1763
01:15:54,282 --> 01:15:57,033
that I've been using
lately called REST Fox.
1764
01:15:58,980 --> 01:16:00,960
Like here I can see all of the devices
1765
01:16:00,960 --> 01:16:02,850
that are associated with my Govee account.
1766
01:16:02,850 --> 01:16:05,910
And I set that up using
this URL here and you'll see
1767
01:16:05,910 --> 01:16:07,830
that it is a get request
and I pressed Send
1768
01:16:07,830 --> 01:16:10,680
and it sent the request and I got back
1769
01:16:10,680 --> 01:16:14,973
the Govee devices that are
associated with my account.
1770
01:16:17,520 --> 01:16:22,080
This API requires a header
and it's called Govee API key.
1771
01:16:22,080 --> 01:16:24,120
And you'll see these double
mustaches here that I'm using,
1772
01:16:24,120 --> 01:16:26,451
this side little mustache thing.
1773
01:16:26,451 --> 01:16:28,563
This is getting things
from my environment,
1774
01:16:28,563 --> 01:16:31,220
it's a special key that I
don't want anybody to see.
1775
01:16:31,220 --> 01:16:33,360
I'll show you more of those here in a bit.
1776
01:16:33,360 --> 01:16:34,932
Now notice how this is a get,
1777
01:16:34,932 --> 01:16:37,350
so I can send the request
and you'll see that here's
1778
01:16:37,350 --> 01:16:40,290
my response and I can also
get the current state.
1779
01:16:40,290 --> 01:16:41,700
So I have a different call here.
1780
01:16:41,700 --> 01:16:44,640
I can get the current state
end note that if I click Send
1781
01:16:44,640 --> 01:16:47,490
here we can see that this is
the color of my light currently
1782
01:16:47,490 --> 01:16:52,113
and I can also turn it on
or turn it off and I can
1783
01:16:53,100 --> 01:16:56,520
turn it on and I can also
change the color, right?
1784
01:16:56,520 --> 01:16:58,860
So I'm gonna turn this to red.
1785
01:16:58,860 --> 01:17:03,060
You don't have to turn
the red light on, Roxanne.
1786
01:17:03,060 --> 01:17:04,260
Pretty cool, right?
1787
01:17:04,260 --> 01:17:06,060
And I have this here
for me whenever I want
1788
01:17:06,060 --> 01:17:07,740
to tweak things, when I
want to come back later
1789
01:17:07,740 --> 01:17:10,110
and when I want to use it in my code.
1790
01:17:10,110 --> 01:17:12,030
Did you just have a light bulb moment?
1791
01:17:12,030 --> 01:17:14,040
I quite literally just did.
1792
01:17:14,040 --> 01:17:15,060
Let's see if we can't build one
1793
01:17:15,060 --> 01:17:17,220
of these for the Twilio APIs.
1794
01:17:17,220 --> 01:17:19,080
So if you'd like to
get REST Fox installed,
1795
01:17:19,080 --> 01:17:20,430
please check the notes.
1796
01:17:20,430 --> 01:17:21,447
This is an open source tool
1797
01:17:21,447 --> 01:17:23,640
and it's getting better every day.
1798
01:17:23,640 --> 01:17:24,510
Now if you love it too,
1799
01:17:24,510 --> 01:17:26,190
I highly suggest that you star it.
1800
01:17:26,190 --> 01:17:27,810
If you click up here,
you could go and you can
1801
01:17:27,810 --> 01:17:30,618
actually check out the
GitHub repo and you could
1802
01:17:30,618 --> 01:17:34,200
see cute little Fox here
and you'll see over here
1803
01:17:34,200 --> 01:17:36,750
how it's tagged that, oh
it's tagged REST client.
1804
01:17:36,750 --> 01:17:38,040
I guess maybe that's a little bit better
1805
01:17:38,040 --> 01:17:41,010
than my Metroidvania analogy.
1806
01:17:41,010 --> 01:17:42,180
Maybe REST client's a good thing.
1807
01:17:42,180 --> 01:17:43,770
API client, that's also a good thing.
1808
01:17:43,770 --> 01:17:46,140
So there's lots of these
tools that are available.
1809
01:17:46,140 --> 01:17:48,033
But let's start using this one.
1810
01:17:48,930 --> 01:17:51,990
So I've got REST Fox
running here and you'll see
1811
01:17:51,990 --> 01:17:55,410
I've got the Govee folder,
which I can collapse.
1812
01:17:55,410 --> 01:17:57,540
And typically what I do is group these
1813
01:17:57,540 --> 01:17:59,280
by the API that I'm exploring.
1814
01:17:59,280 --> 01:18:02,700
So let's keep poking around
a little bit with Twilio.
1815
01:18:02,700 --> 01:18:04,940
So what I'll do is I'll make
a new folder called Twilio.
1816
01:18:04,940 --> 01:18:06,450
So I'm gonna right click over here
1817
01:18:06,450 --> 01:18:10,459
and make a new folder called Twilio.
1818
01:18:10,459 --> 01:18:13,080
And now in here we'll
create a new request.
1819
01:18:13,080 --> 01:18:15,330
So I right clicked New Request
1820
01:18:15,330 --> 01:18:18,060
and I'd love to explore
more of the SMS API.
1821
01:18:18,060 --> 01:18:21,690
So let's see, oh you know what?
1822
01:18:21,690 --> 01:18:23,100
This new number that we just bought,
1823
01:18:23,100 --> 01:18:24,690
this Twilio number that we bought,
1824
01:18:24,690 --> 01:18:28,110
not only can it send messages,
but it can also receive them.
1825
01:18:28,110 --> 01:18:30,450
So we could send it a
message. So let's do that.
1826
01:18:30,450 --> 01:18:33,690
So let's go ahead and send
a text to your number.
1827
01:18:33,690 --> 01:18:37,020
Now if you forgot your number,
it's over in your console.
1828
01:18:37,020 --> 01:18:38,760
So if you come to your
console and you scroll down
1829
01:18:38,760 --> 01:18:41,190
a little bit here, you'll
see My Twilio Number.
1830
01:18:41,190 --> 01:18:44,580
So go ahead and send
a text to your number.
1831
01:18:44,580 --> 01:18:45,870
Now my number, I'm gonna send a number.
1832
01:18:45,870 --> 01:18:50,870
It's (561)-816-5433.
I'm gonna send it, "Yo."
1833
01:18:51,510 --> 01:18:54,750
And there we go, it went
and I ended up getting
1834
01:18:54,750 --> 01:18:58,560
a default message back
and we could change this,
1835
01:18:58,560 --> 01:19:00,324
we could make, we could
program this to do whatever,
1836
01:19:00,324 --> 01:19:02,499
but I'll show that off later, but for now,
1837
01:19:02,499 --> 01:19:05,950
I just want you to know that
we created a new message
1838
01:19:06,810 --> 01:19:10,023
by sending to this API and
we can actually get it.
1839
01:19:11,310 --> 01:19:13,530
And you can also find your phone number
1840
01:19:13,530 --> 01:19:14,880
later here under this phone numbers.
1841
01:19:14,880 --> 01:19:17,521
If you go to Phone Numbers,
Manage Active Numbers,
1842
01:19:17,521 --> 01:19:20,130
you can see your phone
number and remember outside
1843
01:19:20,130 --> 01:19:22,350
of trial mode you could
buy multiple numbers.
1844
01:19:22,350 --> 01:19:24,864
So that's an important thing to know here.
1845
01:19:24,864 --> 01:19:26,640
So, all right, so we are going
1846
01:19:26,640 --> 01:19:28,710
to look at the incoming messages.
1847
01:19:28,710 --> 01:19:30,060
So we should do that,
1848
01:19:30,060 --> 01:19:32,400
we should call the request
what it's going to be.
1849
01:19:32,400 --> 01:19:35,100
We'll call this incoming message log.
1850
01:19:35,100 --> 01:19:37,983
That sounds good. And we'll click Create.
1851
01:19:39,990 --> 01:19:41,760
Okay, so let's head over to the docs
1852
01:19:41,760 --> 01:19:43,728
and see how we might do this with,
1853
01:19:43,728 --> 01:19:47,215
so back in the docs here
on the message resource,
1854
01:19:47,215 --> 01:19:49,410
remember this is where we
did the create a message.
1855
01:19:49,410 --> 01:19:51,871
I'm gonna see if there's
something else down in here.
1856
01:19:51,871 --> 01:19:55,410
Ah, list all messages. That's a good one.
1857
01:19:55,410 --> 01:19:58,410
But we don't want all of the messages,
1858
01:19:58,410 --> 01:20:00,240
we actually want to
filter it a little bit.
1859
01:20:00,240 --> 01:20:03,360
So look here, we can do this
by matching filter criteria.
1860
01:20:03,360 --> 01:20:04,320
That's great.
1861
01:20:04,320 --> 01:20:06,643
So we're in here, I'm
under the curl tab, right?
1862
01:20:06,643 --> 01:20:07,830
I could be in these different ones,
1863
01:20:07,830 --> 01:20:09,802
but this is the example that we want here.
1864
01:20:09,802 --> 01:20:13,670
I'm gonna grab this URL,
you're gonna see all of this.
1865
01:20:13,670 --> 01:20:14,503
So that's how they're filtering it.
1866
01:20:14,503 --> 01:20:15,997
There's some stuff here at the end.
1867
01:20:15,997 --> 01:20:19,241
I'm gonna grab all of this
and I'm gonna copy it.
1868
01:20:19,241 --> 01:20:22,890
I'm gonna come back over and I am going
1869
01:20:22,890 --> 01:20:27,237
to paste it here in
this Enter Request URL.
1870
01:20:27,237 --> 01:20:29,970
I'm gonna paste the whole thing there.
1871
01:20:29,970 --> 01:20:34,740
And it was a get request
and the URL had some stuff
1872
01:20:34,740 --> 01:20:37,680
in this query string that came afterwards.
1873
01:20:37,680 --> 01:20:39,810
And a query string is, you know,
1874
01:20:39,810 --> 01:20:41,100
defined by this question mark.
1875
01:20:41,100 --> 01:20:44,940
So we don't want this date
sent, let's get rid of this.
1876
01:20:44,940 --> 01:20:47,790
And what's next? We don't
want from, right, we don't.
1877
01:20:47,790 --> 01:20:49,230
We wanna look at all the numbers
1878
01:20:49,230 --> 01:20:51,480
that were was sent to, right?
1879
01:20:51,480 --> 01:20:53,973
So this is the to here, is what we want.
1880
01:20:55,800 --> 01:21:00,800
Now this 2B here just
happens to be a percent
1881
01:21:01,438 --> 01:21:05,340
2B URL encode and happens to be a plus.
1882
01:21:05,340 --> 01:21:07,890
And I know that and I just happen to know
1883
01:21:07,890 --> 01:21:10,470
that without having to Google
it but that's a little rough
1884
01:21:10,470 --> 01:21:13,953
to know like how do I
make a plus sign in here?
1885
01:21:14,850 --> 01:21:16,946
Wouldn't it be nice if this tool just
1886
01:21:16,946 --> 01:21:19,590
did all of this URL encoding for us?
1887
01:21:19,590 --> 01:21:22,860
Like we didn't need to
make this mess at the end?
1888
01:21:22,860 --> 01:21:25,710
Well check this out.
Here's query right here.
1889
01:21:25,710 --> 01:21:27,780
This is what we want. So
we wanna add this query.
1890
01:21:27,780 --> 01:21:30,570
We don't want to have this
whole stuff at the end here.
1891
01:21:30,570 --> 01:21:32,790
We wanna put in to,
1892
01:21:32,790 --> 01:21:35,010
we're gonna add one of those things there.
1893
01:21:35,010 --> 01:21:35,850
We'll put in a to.
1894
01:21:35,850 --> 01:21:37,767
So that's gonna append
that query string for me.
1895
01:21:37,767 --> 01:21:42,767
And I'm gonna put in, to my phone number,
1896
01:21:43,440 --> 01:21:46,200
which again my Twilio phone number,
1897
01:21:46,200 --> 01:21:51,200
which is over here in my logs right here.
1898
01:21:51,390 --> 01:21:53,790
Actually I can, I'm
gonna grab this number.
1899
01:21:53,790 --> 01:21:56,070
This is my Twilio number.
1900
01:21:56,070 --> 01:21:58,410
I'm gonna put it in the format that
1901
01:21:58,410 --> 01:22:02,160
is wanted there in my
REST Fox, here we go.
1902
01:22:02,160 --> 01:22:06,420
So I'm gonna fix that and
we're gonna get rid of this.
1903
01:22:06,420 --> 01:22:09,300
Just wanna make sure
that's 1561, there we go.
1904
01:22:09,300 --> 01:22:10,900
Got rid of all those. All right.
1905
01:22:13,050 --> 01:22:15,543
Now also remember that this was accounts
1906
01:22:15,543 --> 01:22:17,760
and then it had account SID, right?
1907
01:22:17,760 --> 01:22:20,430
So that's the ID for my account.
1908
01:22:20,430 --> 01:22:21,450
And then it's under messages.
1909
01:22:21,450 --> 01:22:22,980
There's a collection called Messages
1910
01:22:22,980 --> 01:22:25,304
underneath this account SID.
1911
01:22:25,304 --> 01:22:28,260
But what we want here is we want,
1912
01:22:28,260 --> 01:22:31,860
that was using an environment
variable from Curl,
1913
01:22:31,860 --> 01:22:34,410
but this is also known as
a path variable, right?
1914
01:22:34,410 --> 01:22:36,570
A path parameter, so here,
1915
01:22:36,570 --> 01:22:38,269
down here we have this path parameters.
1916
01:22:38,269 --> 01:22:41,130
So the way that these work actually
1917
01:22:41,130 --> 01:22:43,110
to replace them is if we go like this,
1918
01:22:43,110 --> 01:22:45,630
if I get rid of this and I put a colon,
1919
01:22:45,630 --> 01:22:47,910
what's gonna happen is we
can, anything that's down here
1920
01:22:47,910 --> 01:22:50,130
in this path parameter
will replace what's here.
1921
01:22:50,130 --> 01:22:52,020
So let's do that. Let's add this item.
1922
01:22:52,020 --> 01:22:55,530
And again, that is Twilio account SID.
1923
01:22:55,530 --> 01:22:58,650
So that's the name of the
variable that's up here, right?
1924
01:22:58,650 --> 01:23:00,930
It's colon, Twilio account SID,
that was just what's there.
1925
01:23:00,930 --> 01:23:03,360
Let's keep it 'cause that's what it is.
1926
01:23:03,360 --> 01:23:04,860
And then we're gonna put
our account SID there.
1927
01:23:04,860 --> 01:23:07,380
So that also is on my console.
1928
01:23:07,380 --> 01:23:10,230
So I'm gonna flip back to my console.
1929
01:23:10,230 --> 01:23:15,180
And on the main page here, if you come in,
1930
01:23:15,180 --> 01:23:18,720
you can come down and you
can grab your account SID.
1931
01:23:18,720 --> 01:23:20,010
So now I have my account SID,
1932
01:23:20,010 --> 01:23:22,380
and I'm gonna paste that there.
1933
01:23:22,380 --> 01:23:24,840
Awesome, and I think we're ready.
1934
01:23:24,840 --> 01:23:28,959
I'm gonna press Send
an, oh, we got an error.
1935
01:23:28,959 --> 01:23:33,360
We got a 401 unauthorized,
no credentials provided.
1936
01:23:33,360 --> 01:23:35,700
Oh that's right. Of
course, we want to log in.
1937
01:23:35,700 --> 01:23:38,520
We don't want anyone just being
able to see these messages.
1938
01:23:38,520 --> 01:23:39,480
So we wanna make sure that we
1939
01:23:39,480 --> 01:23:41,283
have some authentication happening.
1940
01:23:42,450 --> 01:23:43,950
So I'm gonna head over to the Auth tab.
1941
01:23:43,950 --> 01:23:45,630
You'll see that if I
slide this back and forth,
1942
01:23:45,630 --> 01:23:47,250
I don't know how much
screen real estate you have,
1943
01:23:47,250 --> 01:23:51,540
but you can slide these
kind of around as need be.
1944
01:23:51,540 --> 01:23:53,130
So I can, I'm gonna
pull this and you'll see
1945
01:23:53,130 --> 01:23:57,150
that when I do my little
menu here collapses.
1946
01:23:57,150 --> 01:23:59,310
So I'm gonna choose Auth from here,
1947
01:23:59,310 --> 01:24:03,600
but that is also available
in the header here, right?
1948
01:24:03,600 --> 01:24:05,650
So like it's just a different view of it.
1949
01:24:06,570 --> 01:24:08,700
All right, so in the Auth I'm gonna put in
1950
01:24:08,700 --> 01:24:11,790
a basic Auth and I'm
gonna put in a username,
1951
01:24:11,790 --> 01:24:15,280
which is my username and
then I'm also going to put in
1952
01:24:16,470 --> 01:24:20,250
my password, which is
my Auth token over here.
1953
01:24:20,250 --> 01:24:21,840
And again, this is very private
1954
01:24:21,840 --> 01:24:25,683
and you would never ever want to do this.
1955
01:24:26,670 --> 01:24:29,520
You now know my Auth token.
I don't want you to have that
1956
01:24:31,290 --> 01:24:34,440
because you could do exactly anything
1957
01:24:34,440 --> 01:24:36,357
you wanted to to my account
now that we're there,
1958
01:24:36,357 --> 01:24:38,236
and one of the things
that you could do is see
1959
01:24:38,236 --> 01:24:40,440
the messages that were sent in and look,
1960
01:24:40,440 --> 01:24:45,440
there's my "Yo," my "Yo"
message has made it in, awesome.
1961
01:24:45,660 --> 01:24:50,520
So also I wanted to show you
the request that happened.
1962
01:24:50,520 --> 01:24:51,450
Let's take a look at that.
1963
01:24:51,450 --> 01:24:53,310
You can see that what
actually happened was it was
1964
01:24:53,310 --> 01:24:56,520
a get that was sent with
the account SID, right?
1965
01:24:56,520 --> 01:24:59,060
And so that was the account
SID that we used from,
1966
01:24:59,060 --> 01:25:01,380
if we look back at the
query parameters here,
1967
01:25:01,380 --> 01:25:05,400
the account SID showed up
there and then it automatically
1968
01:25:05,400 --> 01:25:08,014
did a two URL encoded
and if you look it put
1969
01:25:08,014 --> 01:25:10,847
the question mark in for us
and it did that percent 2B
1970
01:25:10,847 --> 01:25:15,077
for us automatically URL
encoded, very nice, right?
1971
01:25:17,910 --> 01:25:19,710
And we can see the headers that were sent
1972
01:25:19,710 --> 01:25:21,210
and we can also take a look.
1973
01:25:21,210 --> 01:25:22,784
Let's look again at this preview.
1974
01:25:22,784 --> 01:25:24,780
So we see that we had,
1975
01:25:24,780 --> 01:25:27,120
the response came back
and this is JSON, right?
1976
01:25:27,120 --> 01:25:29,340
So we have a key called messages.
1977
01:25:29,340 --> 01:25:32,160
And this messages has this, it starts out,
1978
01:25:32,160 --> 01:25:34,170
there can be multiple
messages here, right?
1979
01:25:34,170 --> 01:25:36,150
So this is the start of what's known as
1980
01:25:36,150 --> 01:25:38,277
a list or an array and
then there's an object.
1981
01:25:38,277 --> 01:25:40,680
And the start of the object
is always done with one
1982
01:25:40,680 --> 01:25:42,780
of these mustaches, and
we call those mustaches
1983
01:25:42,780 --> 01:25:44,329
'cause if you kind of
turn your head sideways,
1984
01:25:44,329 --> 01:25:46,230
it looks like a mustache.
1985
01:25:46,230 --> 01:25:51,230
So all between the opening
mustache and the closing mustache
1986
01:25:51,570 --> 01:25:55,860
is the information about
the messages, right?
1987
01:25:55,860 --> 01:25:59,340
So here's the, and there's
the closing bit of my list.
1988
01:25:59,340 --> 01:26:02,163
There's only one. This is
the closing mustache there.
1989
01:26:03,360 --> 01:26:05,430
And so part of the
message that we can see,
1990
01:26:05,430 --> 01:26:07,030
we can see who it was to,
1991
01:26:07,030 --> 01:26:09,300
that's my Twilio phone number here.
1992
01:26:09,300 --> 01:26:11,430
And we could see the from,
there's my phone number there,
1993
01:26:11,430 --> 01:26:16,320
please don't call too late,
but that's my phone number.
1994
01:26:16,320 --> 01:26:19,260
And I did say, I said "Yo"
to it, which is awesome.
1995
01:26:19,260 --> 01:26:22,830
So now we have this. Now this
step is completely optional.
1996
01:26:22,830 --> 01:26:26,012
This is something that I like
to do is I like to take notes.
1997
01:26:26,012 --> 01:26:28,410
All right, so there's
this incoming message log.
1998
01:26:28,410 --> 01:26:29,700
I like to keep notes and I put those
1999
01:26:29,700 --> 01:26:31,380
in the description over here.
2000
01:26:31,380 --> 01:26:36,380
And so let's see this
returns all incoming.
2001
01:26:40,500 --> 01:26:42,090
Well, let's be a little bit more,
2002
01:26:42,090 --> 01:26:47,090
all messages sent to
this phone number, right?
2003
01:26:48,180 --> 01:26:49,410
And one of the things that I like
2004
01:26:49,410 --> 01:26:51,510
to do is I like to put on the docs here.
2005
01:26:51,510 --> 01:26:53,490
So if I ever come back and I want
2006
01:26:53,490 --> 01:26:55,830
to find how was it that
I learned how to do that,
2007
01:26:55,830 --> 01:26:58,710
I can go and look and put a link there.
2008
01:26:58,710 --> 01:27:01,410
So I'm gonna go flip back
over to the docs real quick.
2009
01:27:03,180 --> 01:27:05,190
And this is read a message
with matching a filter.
2010
01:27:05,190 --> 01:27:07,950
I'm gonna copy this
link, I'm gonna grab this
2011
01:27:07,950 --> 01:27:09,877
or click this here so that then
it changed the URL up here.
2012
01:27:09,877 --> 01:27:12,120
I'm gonna copy this and this is
2013
01:27:12,120 --> 01:27:14,070
what I'm gonna store in my notes.
2014
01:27:14,070 --> 01:27:16,470
Again, this is totally
optional and this is just notes
2015
01:27:16,470 --> 01:27:18,690
for you for later 'cause
you could end up having
2016
01:27:18,690 --> 01:27:19,980
a whole bunch of these and you might not
2017
01:27:19,980 --> 01:27:22,020
remember how you found how to do that.
2018
01:27:22,020 --> 01:27:23,640
If there's something specific or strange
2019
01:27:23,640 --> 01:27:25,380
about the API that she wanted to know,
2020
01:27:25,380 --> 01:27:27,393
I keep the notes in there and it's a just
2021
01:27:27,393 --> 01:27:31,860
a handy learning tool and
again, totally optional.
2022
01:27:31,860 --> 01:27:34,350
So we've got our first entry all set
2023
01:27:34,350 --> 01:27:36,600
and I think we should add another one.
2024
01:27:36,600 --> 01:27:39,120
Why don't we create the
send message one, right?
2025
01:27:39,120 --> 01:27:40,290
So the one that we did before
2026
01:27:40,290 --> 01:27:41,580
we sent messages, let's do that.
2027
01:27:41,580 --> 01:27:43,590
So I'm just gonna duplicate
this 'cause it's got
2028
01:27:43,590 --> 01:27:46,080
a bunch of the information
that I already need in it.
2029
01:27:46,080 --> 01:27:49,530
So I'm gonna duplicate it and
what I'm going to do here is
2030
01:27:49,530 --> 01:27:54,363
I'm gonna duplicate and I'm
gonna say "Send message," right?
2031
01:27:55,710 --> 01:27:57,900
So when we sent a message before,
2032
01:27:57,900 --> 01:28:00,840
remember it wasn't a get, it's a post.
2033
01:28:00,840 --> 01:28:02,580
So I'm gonna change,
2034
01:28:02,580 --> 01:28:06,690
I'm gonna change that
from a get to a post.
2035
01:28:06,690 --> 01:28:08,490
So now we've got this send message
2036
01:28:08,490 --> 01:28:11,850
that's a post and the query string.
2037
01:28:11,850 --> 01:28:16,350
I don't want to send a
query string anymore, right?
2038
01:28:16,350 --> 01:28:17,730
So remember wait, before when we did this,
2039
01:28:17,730 --> 01:28:20,640
we sent it to using the data URL encode.
2040
01:28:20,640 --> 01:28:22,590
In fact let's go, let's
pop back over there
2041
01:28:22,590 --> 01:28:24,300
and look at what it was that we did.
2042
01:28:24,300 --> 01:28:26,888
So in the documentation over here
2043
01:28:26,888 --> 01:28:29,786
we have this create a message resource.
2044
01:28:29,786 --> 01:28:33,000
So, on the message resource
page here, we can look
2045
01:28:33,000 --> 01:28:37,110
and we can go to this
create a message resource
2046
01:28:37,110 --> 01:28:38,820
and there's some information about it.
2047
01:28:38,820 --> 01:28:41,970
So you send this http post
and you can see that again
2048
01:28:41,970 --> 01:28:43,440
we were, remember before
we were doing this data
2049
01:28:43,440 --> 01:28:45,690
URL encode and we were
doing this URL encoded.
2050
01:28:45,690 --> 01:28:47,910
So it's this form encoding
is what's happening here.
2051
01:28:47,910 --> 01:28:52,260
And oh look, well a couple things
2052
01:28:52,260 --> 01:28:53,700
actually there's a nice warning here.
2053
01:28:53,700 --> 01:28:54,840
This says if you wanna send messages
2054
01:28:54,840 --> 01:28:57,450
while in trial mode you must
verify your two numbers.
2055
01:28:57,450 --> 01:28:58,860
So if you wanted to send to somebody else,
2056
01:28:58,860 --> 01:29:01,296
you could put them in
this verified caller IDs
2057
01:29:01,296 --> 01:29:04,239
if you wanted to, you could
send to somebody else as well.
2058
01:29:04,239 --> 01:29:06,810
Just there. That's how you do that.
2059
01:29:06,810 --> 01:29:08,370
If you wanted to test or show somebody
2060
01:29:08,370 --> 01:29:11,130
what you're building,
that's how you do that.
2061
01:29:11,130 --> 01:29:13,140
After of course, after
you're not in trial mode,
2062
01:29:13,140 --> 01:29:15,810
you could submit to
whoever you would like to.
2063
01:29:15,810 --> 01:29:18,900
So when we are creating a message,
2064
01:29:18,900 --> 01:29:20,220
we must include the to, right?
2065
01:29:20,220 --> 01:29:22,260
We need that and we need the from.
2066
01:29:22,260 --> 01:29:24,367
So we'll do either and
we'll do body and there's
2067
01:29:24,367 --> 01:29:27,510
this media URL which means
I can send a picture.
2068
01:29:27,510 --> 01:29:30,030
Let's do that. Let's make it
so that it sends a picture.
2069
01:29:30,030 --> 01:29:33,870
Now when I am in REST Fox over here,
2070
01:29:33,870 --> 01:29:36,240
I don't want to use the query anymore,
2071
01:29:36,240 --> 01:29:38,640
I'm gonna keep the path 'cause
the path is the same, right?
2072
01:29:38,640 --> 01:29:42,390
So we're gonna do, we're gonna
do a post to that same URL,
2073
01:29:42,390 --> 01:29:46,590
Twilio account slash account
SID messages dot JSON
2074
01:29:46,590 --> 01:29:48,720
and we're gonna make a post
to it instead of making
2075
01:29:48,720 --> 01:29:51,510
a list and retrieving,
we're going to create.
2076
01:29:51,510 --> 01:29:54,043
So we're gonna go under
body and for the body
2077
01:29:54,043 --> 01:29:57,060
we're gonna make it form URL encoded.
2078
01:29:57,060 --> 01:29:59,400
And what we wanna do there
is we wanna send it to,
2079
01:29:59,400 --> 01:30:02,370
so I'm gonna send this to my number.
2080
01:30:02,370 --> 01:30:05,610
Again, don't call too
late, (432) 527-4274.
2081
01:30:08,550 --> 01:30:09,930
No really, if you wanna call
2082
01:30:09,930 --> 01:30:13,170
and get feedback, that's
fine, I'd love to chat.
2083
01:30:13,170 --> 01:30:17,940
So we'll do from, and
that is my number again,
2084
01:30:17,940 --> 01:30:20,593
this is my number and
which was that number.
2085
01:30:23,010 --> 01:30:24,720
So we can come here into the message log.
2086
01:30:24,720 --> 01:30:26,910
We can go pull that number
from the query string.
2087
01:30:26,910 --> 01:30:29,763
So this is my Twilio number there.
2088
01:30:33,300 --> 01:30:36,420
From is this value there and we are going
2089
01:30:36,420 --> 01:30:41,420
to add the body, the body will say sent
2090
01:30:41,850 --> 01:30:46,850
from REST Fox and let's add our media URL.
2091
01:30:47,607 --> 01:30:51,660
And I just happen to have
one of my favorite photos,
2092
01:30:51,660 --> 01:30:56,220
which you will have to check out
2093
01:30:56,220 --> 01:30:58,648
for yourself to know what it is.
2094
01:30:58,648 --> 01:31:02,070
But it is a photo that
I pick, if you will,
2095
01:31:02,070 --> 01:31:04,909
that I'm going to send to myself.
2096
01:31:04,909 --> 01:31:07,320
It's also in the notes if
you want to do this as well,
2097
01:31:07,320 --> 01:31:09,120
if you wanna copy that and paste that.
2098
01:31:09,120 --> 01:31:11,880
So here we go. I am going to do a send.
2099
01:31:11,880 --> 01:31:14,640
Now remember I'm also
authenticated with my username
2100
01:31:14,640 --> 01:31:16,770
and password 'cause that
copied across when I did it.
2101
01:31:16,770 --> 01:31:21,000
So I'm gonna do a to, from,
a body and a media URL.
2102
01:31:21,000 --> 01:31:25,530
So now I'm gonna go ahead
and click Send and boom,
2103
01:31:25,530 --> 01:31:27,750
we got our message back, right?
2104
01:31:27,750 --> 01:31:30,480
So the response, we got
a 201 created, right?
2105
01:31:30,480 --> 01:31:32,370
So it was created in the body,
2106
01:31:32,370 --> 01:31:34,020
we can see the body of our message.
2107
01:31:34,020 --> 01:31:37,470
The key is sent from REST Fox,
it's got some information.
2108
01:31:37,470 --> 01:31:40,530
We can go ahead and get
access to that message
2109
01:31:40,530 --> 01:31:43,950
if we wanted to and it's got
these actual media resources
2110
01:31:43,950 --> 01:31:45,597
down here, which we can
also take a look at.
2111
01:31:45,597 --> 01:31:48,720
And we could, if we wanted to
open up a whole 'nother one
2112
01:31:48,720 --> 01:31:50,550
of these and explore and
see what that looked like.
2113
01:31:50,550 --> 01:31:53,340
But let's take a look
at that in a new tool.
2114
01:31:53,340 --> 01:31:55,950
Before we do go to look at that new tool,
2115
01:31:55,950 --> 01:32:00,180
one thing that I don't
love about what we just did
2116
01:32:00,180 --> 01:32:02,610
are in my, in these requests, in these
2117
01:32:02,610 --> 01:32:06,990
separate requests, these
are duplicated, right?
2118
01:32:06,990 --> 01:32:08,490
I've got this username and password.
2119
01:32:08,490 --> 01:32:10,440
If I go to my post send message,
2120
01:32:10,440 --> 01:32:12,990
I've got this username and password
2121
01:32:12,990 --> 01:32:15,596
and they're duplicated there,
which isn't great, right?
2122
01:32:15,596 --> 01:32:17,493
That's not excellent.
2123
01:32:18,780 --> 01:32:22,260
One of the things and one of
the tools that most of these
2124
01:32:22,260 --> 01:32:25,080
REST clients provide is a
thing called an environment.
2125
01:32:25,080 --> 01:32:27,864
And let's set that up really
quick, real quick for this.
2126
01:32:27,864 --> 01:32:29,820
So if I come here under this environment,
2127
01:32:29,820 --> 01:32:33,180
here is my default
collection and I can add
2128
01:32:33,180 --> 01:32:36,660
a new environment, I'm
gonna add one for Twilio.
2129
01:32:36,660 --> 01:32:41,240
Now the way that these work
are, they are JSON based.
2130
01:32:42,150 --> 01:32:45,150
So this is, remember this
is the start of an object.
2131
01:32:45,150 --> 01:32:47,370
Now if you've never written JSON before,
2132
01:32:47,370 --> 01:32:49,413
take your time, use some patience.
2133
01:32:50,250 --> 01:32:52,050
One of the things that you
could do is you could come in
2134
01:32:52,050 --> 01:32:56,100
and you can put in account
Twilio account SID,
2135
01:32:56,100 --> 01:32:59,584
and you do the key and then you do a colon
2136
01:32:59,584 --> 01:33:02,040
and you can see that
I'm, this is unexpected
2137
01:33:02,040 --> 01:33:04,530
JSON down here, it's helping me out.
2138
01:33:04,530 --> 01:33:08,370
And now I'm gonna put in
my account SID and again,
2139
01:33:08,370 --> 01:33:11,310
let me go copy that one more
time and I don't have to copy
2140
01:33:11,310 --> 01:33:13,133
this anymore 'cause it will
be part of my environment.
2141
01:33:13,133 --> 01:33:16,050
It will be here with me,
which is really nice.
2142
01:33:16,050 --> 01:33:17,637
So come over here, I'm gonna paste that
2143
01:33:17,637 --> 01:33:19,620
and now I want to add a new key.
2144
01:33:19,620 --> 01:33:21,957
So the way JSON works is you
put a comma after that, right?
2145
01:33:21,957 --> 01:33:24,390
And I'm gonna put a new, the new key here
2146
01:33:24,390 --> 01:33:28,353
and we'll do a Twilio
account or Auth token.
2147
01:33:30,060 --> 01:33:33,090
And again, this is, that can
be, that key can be whatever
2148
01:33:33,090 --> 01:33:35,340
you want it to be and we'll
be able to reference it.
2149
01:33:35,340 --> 01:33:37,707
So I'm gonna come and grab my Auth token
2150
01:33:37,707 --> 01:33:39,570
and I'm going to change this, right?
2151
01:33:39,570 --> 01:33:43,770
So that's a great use case
of this is I don't want you
2152
01:33:43,770 --> 01:33:47,790
to be able to, I am going
to change this, right?
2153
01:33:47,790 --> 01:33:49,560
So as soon as this, as soon
as I'm done recording this,
2154
01:33:49,560 --> 01:33:51,780
I'm gonna change my Auth
token and that would mean
2155
01:33:51,780 --> 01:33:53,700
that I'd have to go
change each one of 'em.
2156
01:33:53,700 --> 01:33:56,610
But now I have one place
where it's defined.
2157
01:33:56,610 --> 01:33:58,650
I have one place in my
environment that's defined.
2158
01:33:58,650 --> 01:34:00,750
So I have this environment
here that says Twilio.
2159
01:34:00,750 --> 01:34:04,950
Now instead of username I can
do this mustache, mustache.
2160
01:34:04,950 --> 01:34:09,950
And I can say Twilio account SID
2161
01:34:10,080 --> 01:34:12,630
and that's the way the
templating language works here.
2162
01:34:12,630 --> 01:34:14,910
And then most of these REST clients
2163
01:34:14,910 --> 01:34:19,440
and you can do Twilio token.
2164
01:34:19,440 --> 01:34:21,420
So when you see that's what's happening.
2165
01:34:21,420 --> 01:34:22,770
That is the environment,
2166
01:34:22,770 --> 01:34:24,420
it's using the environment variables.
2167
01:34:24,420 --> 01:34:27,510
I'm gonna go do that for here.
2168
01:34:27,510 --> 01:34:31,440
And also I'm gonna copy
my Auth token for here.
2169
01:34:31,440 --> 01:34:34,620
And so now I only need to
change that in one place
2170
01:34:34,620 --> 01:34:38,820
in my environment and
you can also use it here.
2171
01:34:38,820 --> 01:34:40,530
So like not like before I can,
2172
01:34:40,530 --> 01:34:43,530
I can also put my account SID here.
2173
01:34:43,530 --> 01:34:47,070
So that will also make this
so that it's shareable, right?
2174
01:34:47,070 --> 01:34:50,310
So if I don't specify my information
2175
01:34:50,310 --> 01:34:51,197
in here, I can share it.
2176
01:34:51,197 --> 01:34:53,610
So you what you could do, and
actually why don't you try
2177
01:34:53,610 --> 01:34:57,330
to do it, why don't you try to
add your Twilio phone number
2178
01:34:57,330 --> 01:35:01,320
and see if you can figure out how to add
2179
01:35:01,320 --> 01:35:05,040
to your JSON there,
your Twilio phone number
2180
01:35:05,040 --> 01:35:06,690
and then you could replace it, right?
2181
01:35:06,690 --> 01:35:09,630
You could replace it here with your from,
2182
01:35:09,630 --> 01:35:12,270
from your Twilio phone
number, pretty neat, right?
2183
01:35:12,270 --> 01:35:14,520
So that's a good, little trick
that you could do in here.
2184
01:35:14,520 --> 01:35:15,780
You could do your Twilio phone number,
2185
01:35:15,780 --> 01:35:17,190
you could use it there too.
2186
01:35:17,190 --> 01:35:18,660
So anything that you're using is something
2187
01:35:18,660 --> 01:35:21,870
that you can kind of store
there in your environment.
2188
01:35:21,870 --> 01:35:22,920
And what's nice about that,
2189
01:35:22,920 --> 01:35:25,320
let's make sure that it still works.
2190
01:35:25,320 --> 01:35:26,430
Yep, it's still working.
2191
01:35:26,430 --> 01:35:27,960
And let's make sure, make sure my, oh,
2192
01:35:27,960 --> 01:35:31,020
I'm not gonna send another
picture to myself, that's fine.
2193
01:35:31,020 --> 01:35:34,977
So we know that this
environment is now working
2194
01:35:34,977 --> 01:35:36,960
and it's here and I don't need to go back
2195
01:35:36,960 --> 01:35:39,930
and get those every
single time, really handy.
2196
01:35:39,930 --> 01:35:42,060
And what's nice is you can
do these imports and exports
2197
01:35:42,060 --> 01:35:43,590
and we'll take a look
at that here in a bit.
2198
01:35:43,590 --> 01:35:46,278
So when we get back
we're gonna take a look
2199
01:35:46,278 --> 01:35:49,710
in a different tool
'cause this is REST Fox
2200
01:35:49,710 --> 01:35:52,560
and I know that you're probably
getting ready for a rest.
2201
01:35:52,560 --> 01:35:55,140
So let's take a quick break
and then let's see if we
2202
01:35:55,140 --> 01:35:58,650
can't retrieve that pic that
I sent myself via this API.
2203
01:35:58,650 --> 01:36:03,540
But let's do that in another
Postman mania or REST client,
2204
01:36:03,540 --> 01:36:05,069
right after a quick break, that is.
2205
01:36:05,069 --> 01:36:07,736
(upbeat music)
2206
01:36:20,400 --> 01:36:22,080
All right, quick refresher.
2207
01:36:22,080 --> 01:36:27,080
We had just sent a message from
REST Fox, a REST API client.
2208
01:36:28,020 --> 01:36:30,060
Here's the body of the message
we just sent from REST Fox
2209
01:36:30,060 --> 01:36:33,120
and we actually sent
across some media with it.
2210
01:36:33,120 --> 01:36:36,360
You can see here it has
this Num Media one 'cause
2211
01:36:36,360 --> 01:36:40,440
each text message can have
multiple medias attached.
2212
01:36:40,440 --> 01:36:42,900
And if you scroll down here,
you'll can see that there
2213
01:36:42,900 --> 01:36:47,730
is this key of sub resource
URIs and it has a list
2214
01:36:47,730 --> 01:36:51,210
of an object here and one
of the objects is for media.
2215
01:36:51,210 --> 01:36:53,430
And what this will do is
this will allow whatever's
2216
01:36:53,430 --> 01:36:57,330
at this URL will give us the accounts
2217
01:36:57,330 --> 01:37:00,330
for this account, for
this message specifically,
2218
01:37:00,330 --> 01:37:02,970
it'll give us all of the
media that is listed.
2219
01:37:02,970 --> 01:37:06,450
Now, typically when I have
something that's this far out,
2220
01:37:06,450 --> 01:37:08,010
we could actually add another one here.
2221
01:37:08,010 --> 01:37:11,070
But I thought I'd show you a
little bit of how my process
2222
01:37:11,070 --> 01:37:15,270
normally looks in case we wanted
to see what that felt like.
2223
01:37:15,270 --> 01:37:19,200
So I use an editor called
Visual Studio Code.
2224
01:37:19,200 --> 01:37:20,727
It's free, it's available
2225
01:37:20,727 --> 01:37:22,710
and this is where I do my coding from.
2226
01:37:22,710 --> 01:37:25,140
So I start here, I start
working on my coding.
2227
01:37:25,140 --> 01:37:28,470
I would love for you to
go ahead and download this
2228
01:37:28,470 --> 01:37:30,450
because I wanna show you
a tool that's inside here
2229
01:37:30,450 --> 01:37:33,930
that will allow us to do
a REST client as well.
2230
01:37:33,930 --> 01:37:37,470
So go ahead and pause me, get
Visual Studio Code installed
2231
01:37:37,470 --> 01:37:39,682
and when you do come back
and I'll show you something.
2232
01:37:39,682 --> 01:37:42,349
(upbeat music)
2233
01:37:46,320 --> 01:37:48,840
Okay, so once you get
Visual Studio Code up
2234
01:37:48,840 --> 01:37:51,660
and running, if you press Command+Shift+P,
2235
01:37:51,660 --> 01:37:53,820
there is a thing called extensions.
2236
01:37:53,820 --> 01:37:55,843
And this will do a little, if you type in
2237
01:37:55,843 --> 01:37:58,950
Install Extensions, you can come here
2238
01:37:58,950 --> 01:38:00,990
and you can see different
things that are available.
2239
01:38:00,990 --> 01:38:03,810
What I want you to install
is a thing called Thunder.
2240
01:38:03,810 --> 01:38:06,180
We're gonna do install a
thing called Thunder Client.
2241
01:38:06,180 --> 01:38:07,320
And it's this one here,
2242
01:38:07,320 --> 01:38:10,770
it's a lightweight REST
API client for a VS code.
2243
01:38:10,770 --> 01:38:12,680
It's really powerful and the good news is,
2244
01:38:12,680 --> 01:38:14,370
is it is Postman-esque.
2245
01:38:14,370 --> 01:38:16,178
You are gonna feel very familiar
2246
01:38:16,178 --> 01:38:17,730
when you take a look at this.
2247
01:38:17,730 --> 01:38:21,240
So if you do it, you can
go ahead and click Install.
2248
01:38:21,240 --> 01:38:23,130
And what will happen is there'll
be a little Thunder Client
2249
01:38:23,130 --> 01:38:24,930
that will install over here like so.
2250
01:38:25,766 --> 01:38:28,410
And just like you've seen
before, there are these,
2251
01:38:28,410 --> 01:38:31,320
this concept of collections
and we can make a new one.
2252
01:38:31,320 --> 01:38:35,490
So I'll make a new collection
for Twilio and typically
2253
01:38:35,490 --> 01:38:37,437
what I'm doing is I'm coding
and I run into this API
2254
01:38:37,437 --> 01:38:39,570
and I'm like, ooh, I wonder what this is.
2255
01:38:39,570 --> 01:38:41,460
I'm gonna go explore it a little bit
2256
01:38:41,460 --> 01:38:43,710
and I'll explore it right
from my editor, right?
2257
01:38:43,710 --> 01:38:45,747
So I'll write my code here
and then I can come over here
2258
01:38:45,747 --> 01:38:47,757
and just take a look at what was there.
2259
01:38:47,757 --> 01:38:50,715
And so let's go back to
REST Fox and I'm gonna grab
2260
01:38:50,715 --> 01:38:52,860
that REST Fox that we had here, right?
2261
01:38:52,860 --> 01:38:53,693
So we're gonna do that.
2262
01:38:53,693 --> 01:38:58,230
I'm gonna grab that and I'm
gonna come back over here
2263
01:38:58,230 --> 01:39:01,740
to Twilio, I'm gonna make a new request.
2264
01:39:01,740 --> 01:39:04,833
I get to name it. And
this was the media check.
2265
01:39:05,700 --> 01:39:07,020
Let's no, we're gonna do all media.
2266
01:39:07,020 --> 01:39:09,153
All media for a specific message, right?
2267
01:39:10,890 --> 01:39:13,110
So here we go, I'm gonna paste that URL
2268
01:39:13,110 --> 01:39:14,460
in here and of course it's missing
2269
01:39:14,460 --> 01:39:19,460
that first part, which was api.twilio.com.
2270
01:39:19,830 --> 01:39:21,000
So again, this is the going for
2271
01:39:21,000 --> 01:39:22,550
that account to those messages.
2272
01:39:23,520 --> 01:39:25,430
I'm gonna look here at where it says Auth.
2273
01:39:25,430 --> 01:39:28,800
So it says inherent
authentication values from parent.
2274
01:39:28,800 --> 01:39:30,810
This is a very nice thing and
this is something that Postman
2275
01:39:30,810 --> 01:39:34,050
has too that REST Fox
doesn't necessarily have.
2276
01:39:34,050 --> 01:39:36,972
We put this in our own
environment, it's kind of similar,
2277
01:39:36,972 --> 01:39:39,180
but you can make, for this
collection that we built,
2278
01:39:39,180 --> 01:39:41,760
we can actually do the
settings for the collection.
2279
01:39:41,760 --> 01:39:42,630
And if I come in here,
2280
01:39:42,630 --> 01:39:44,640
I can set the Auth up here so I could do
2281
01:39:44,640 --> 01:39:48,240
this basic Auth here and go grab my stuff.
2282
01:39:48,240 --> 01:39:50,970
And so just a reminder
in REST Fox, when we did
2283
01:39:50,970 --> 01:39:52,570
that before we were in
the environment of Twilio
2284
01:39:52,570 --> 01:39:57,360
and I was able to grab the
Twilio account SID, right?
2285
01:39:57,360 --> 01:40:02,360
So let's go back to our code
here and the Twilio account SID
2286
01:40:02,370 --> 01:40:06,060
is the username and the password.
2287
01:40:06,060 --> 01:40:09,720
Let's go back to that
environment in REST Fox.
2288
01:40:09,720 --> 01:40:11,190
The password is that Auth.
2289
01:40:14,610 --> 01:40:16,320
There we go, we'll paste that there.
2290
01:40:16,320 --> 01:40:18,420
Perfect. So I'm gonna click Save on this.
2291
01:40:18,420 --> 01:40:21,150
And so now this all media should work.
2292
01:40:21,150 --> 01:40:22,170
So I'm gonna go ahead, I'm gonna do
2293
01:40:22,170 --> 01:40:25,200
a send to this and there
we go, we got it back.
2294
01:40:25,200 --> 01:40:29,040
And we can see there's a
media list is the key here.
2295
01:40:29,040 --> 01:40:30,470
And again, it's an array of those and this
2296
01:40:30,470 --> 01:40:33,180
is the list of all of the
media that's available.
2297
01:40:33,180 --> 01:40:34,860
And so now look at this collection.
2298
01:40:34,860 --> 01:40:36,360
So we have a collection of accounts
2299
01:40:36,360 --> 01:40:37,500
and here's a specific account.
2300
01:40:37,500 --> 01:40:39,878
We have a collection,
that account has messages.
2301
01:40:39,878 --> 01:40:44,743
That message has media and
that media has an entry,
2302
01:40:44,743 --> 01:40:46,590
a media entry, and that's it.
2303
01:40:46,590 --> 01:40:47,970
This is what we're looking at right here.
2304
01:40:47,970 --> 01:40:50,460
So something that's pretty cool.
2305
01:40:50,460 --> 01:40:51,840
The way that this works is if I get this,
2306
01:40:51,840 --> 01:40:53,970
I can get some metadata
information about it.
2307
01:40:53,970 --> 01:40:55,830
But if I get just a little bit of it,
2308
01:40:55,830 --> 01:40:58,110
if I just go ahead and
take this the way that,
2309
01:40:58,110 --> 01:41:01,168
the way that Twilio works,
and not all APIs do this,
2310
01:41:01,168 --> 01:41:03,240
but if I do this without
the extension here,
2311
01:41:03,240 --> 01:41:05,820
I'll actually get back
the picture that I sent.
2312
01:41:05,820 --> 01:41:06,653
So I'm gonna do that,
2313
01:41:06,653 --> 01:41:08,704
I'm gonna make a new little request here.
2314
01:41:08,704 --> 01:41:12,492
So a new request, and we're gonna
2315
01:41:12,492 --> 01:41:14,760
call this, get the pic, right?
2316
01:41:14,760 --> 01:41:16,020
We're gonna get that pic that I sent
2317
01:41:16,020 --> 01:41:17,790
'cause we don't, still don't
know what that pic was.
2318
01:41:17,790 --> 01:41:20,220
What was it? Let's go take a look.
2319
01:41:20,220 --> 01:41:23,887
So, again, at the end
of this, oops, sorry.
2320
01:41:25,956 --> 01:41:29,070
At the end of this, there
is no extension, right?
2321
01:41:29,070 --> 01:41:31,440
So I got rid of the dot
JSON extension and I'm gonna
2322
01:41:31,440 --> 01:41:36,440
put it the front here,
HTTPS api.twilio.com.
2323
01:41:37,860 --> 01:41:41,430
And the interesting thing
about this is this pic
2324
01:41:41,430 --> 01:41:44,130
is not authenticated and
if you do authenticate,
2325
01:41:44,130 --> 01:41:45,630
you end up actually having some problems.
2326
01:41:45,630 --> 01:41:48,205
So I'm gonna tell this
request specifically
2327
01:41:48,205 --> 01:41:50,160
to not inherit value.
2328
01:41:50,160 --> 01:41:52,710
So I'm gonna disable this so
that it's not authenticated.
2329
01:41:52,710 --> 01:41:55,302
So when I click this, if all goes well,
2330
01:41:55,302 --> 01:41:57,300
we should see the pic that I submitted,
2331
01:41:57,300 --> 01:41:59,460
awesome, and we do, cool.
2332
01:41:59,460 --> 01:42:01,320
So it's a little big,
2333
01:42:01,320 --> 01:42:04,593
it's a little big of a
pic that was sent here.
2334
01:42:05,490 --> 01:42:07,380
And we could take a
look at some stuff here.
2335
01:42:07,380 --> 01:42:09,750
We could look at the
headers that were sent.
2336
01:42:09,750 --> 01:42:10,890
So we can see a couple things.
2337
01:42:10,890 --> 01:42:13,590
One of the things that I
think is really interesting is
2338
01:42:13,590 --> 01:42:17,580
when it says last modified,
so the last modified date,
2339
01:42:17,580 --> 01:42:19,800
if you have a request that has this on it,
2340
01:42:19,800 --> 01:42:21,540
it means that you can use caching.
2341
01:42:21,540 --> 01:42:24,420
So you can, when you make the
request, you can actually say,
2342
01:42:24,420 --> 01:42:27,360
if it's been modified
since this time, do that.
2343
01:42:27,360 --> 01:42:28,770
So I'm gonna do that, I'm gonna grab this.
2344
01:42:28,770 --> 01:42:30,450
Let's just take a look
and see what that does.
2345
01:42:30,450 --> 01:42:31,587
So I'm gonna go to headers here
2346
01:42:31,587 --> 01:42:36,587
and I'm gonna put a new
header in here of if,
2347
01:42:36,720 --> 01:42:38,070
and you can see that
there's auto complete.
2348
01:42:38,070 --> 01:42:40,110
So it's if modified since.
2349
01:42:40,110 --> 01:42:42,930
So again, this is the
request that I am making,
2350
01:42:42,930 --> 01:42:45,540
I'm making this request and
I'm gonna say if it's been
2351
01:42:45,540 --> 01:42:50,540
modified since then, give me
and otherwise let me know.
2352
01:42:50,567 --> 01:42:55,410
And so the way that it lets
you know is 304 not modified.
2353
01:42:55,410 --> 01:42:56,370
So that's a status and you'll see
2354
01:42:56,370 --> 01:42:57,960
that I got zero bytes back.
2355
01:42:57,960 --> 01:43:00,210
So that is how caching works
2356
01:43:00,210 --> 01:43:02,248
and what you can do to send this across.
2357
01:43:02,248 --> 01:43:04,050
So, this is really powerful, right?
2358
01:43:04,050 --> 01:43:05,580
I didn't need to set up
all the other things.
2359
01:43:05,580 --> 01:43:08,400
And it's kind of really a
quick little look at this.
2360
01:43:08,400 --> 01:43:09,780
I don't actually even
need to do a collection.
2361
01:43:09,780 --> 01:43:11,730
I can just do a new request
outside of it and I kind
2362
01:43:11,730 --> 01:43:15,960
of explore through and see
how these things are working.
2363
01:43:15,960 --> 01:43:19,290
Which ding, ding, ding,
means we covered another part
2364
01:43:19,290 --> 01:43:22,050
of a RESTful API
constraint scavenger hunt.
2365
01:43:22,050 --> 01:43:24,000
Using standard HTTP caching
2366
01:43:24,000 --> 01:43:26,580
mechanisms like last modified and e-tags,
2367
01:43:26,580 --> 01:43:29,370
a RESTful API should support caching.
2368
01:43:29,370 --> 01:43:31,530
It's up to you to maintain
the cache on your client
2369
01:43:31,530 --> 01:43:33,870
and decorate requests,
but this can come in
2370
01:43:33,870 --> 01:43:37,050
really handy to avoid
making unneeded requests.
2371
01:43:37,050 --> 01:43:40,337
And those are the Postman-esque
things I wanted you to see.
2372
01:43:40,337 --> 01:43:43,590
I wanted you to be able to
do that without diving in
2373
01:43:43,590 --> 01:43:47,100
necessarily to do all of the
Postman enterprise things
2374
01:43:47,100 --> 01:43:50,160
that you wanna do, but I think it's time.
2375
01:43:50,160 --> 01:43:52,110
I think you should feel
comfortable enough that we can now
2376
01:43:52,110 --> 01:43:55,170
look at Postman and see what
we've already learned there.
2377
01:43:55,170 --> 01:43:59,250
So I'm gonna go here and
I'm gonna just do a quick,
2378
01:43:59,250 --> 01:44:02,070
quick little Google search for Postman.
2379
01:44:02,070 --> 01:44:03,210
And this is really nice.
2380
01:44:03,210 --> 01:44:05,400
You can do this for whatever
API you're working at with.
2381
01:44:05,400 --> 01:44:06,420
And since we're working with Twilio,
2382
01:44:06,420 --> 01:44:08,970
I'm gonna search for the
Postman Twilio collection.
2383
01:44:10,200 --> 01:44:11,820
So there's some docs on Twilio about it,
2384
01:44:11,820 --> 01:44:12,653
but if you look here,
2385
01:44:12,653 --> 01:44:15,210
there's this Twilio
Postman on the API network.
2386
01:44:15,210 --> 01:44:16,770
So this is important
to know, there's a lot
2387
01:44:16,770 --> 01:44:19,620
of things on this API network where
2388
01:44:19,620 --> 01:44:22,770
they've built APIs for
you to go and share.
2389
01:44:22,770 --> 01:44:24,750
So I'm gonna click this and now note
2390
01:44:24,750 --> 01:44:26,100
I'm inside of a web browser.
2391
01:44:26,100 --> 01:44:28,470
Postman's done a really gorgeous job
2392
01:44:28,470 --> 01:44:31,530
of letting you run inside of your browser.
2393
01:44:31,530 --> 01:44:33,994
You also can run it locally
like we did with REST Fox,
2394
01:44:33,994 --> 01:44:35,940
but I'm gonna run this from my browser.
2395
01:44:35,940 --> 01:44:40,680
So I'm gonna go into this
messaging SMS and you can see
2396
01:44:40,680 --> 01:44:43,380
there's all sorts of
different things in here.
2397
01:44:43,380 --> 01:44:45,570
It's a little bit hard to get to here,
2398
01:44:45,570 --> 01:44:46,590
but you could change things.
2399
01:44:46,590 --> 01:44:48,660
Put in your account SID,
and all sorts of things.
2400
01:44:48,660 --> 01:44:50,790
Like we saw, look, here's
the double mustaches, right?
2401
01:44:50,790 --> 01:44:55,007
And here's a thing to send
an SMS and it's super cool.
2402
01:44:57,072 --> 01:44:59,069
It's neat, right? And so you've seen this.
2403
01:44:59,069 --> 01:45:00,960
Here's your authorization, the headers,
2404
01:45:00,960 --> 01:45:02,640
the body, there's collections.
2405
01:45:02,640 --> 01:45:04,590
And what's cool is somebody's already
2406
01:45:04,590 --> 01:45:05,790
built these collections for you
2407
01:45:05,790 --> 01:45:07,710
and they're sharing your
stuff this way, right?
2408
01:45:07,710 --> 01:45:08,820
So that's kind of nice.
2409
01:45:08,820 --> 01:45:10,077
So there again, there's
path variables, right?
2410
01:45:10,077 --> 01:45:11,520
And the path variables coming up here.
2411
01:45:11,520 --> 01:45:14,103
There's the call and
account SID that you saw
2412
01:45:14,103 --> 01:45:17,798
from before, here, somebody's
using this as the start,
2413
01:45:17,798 --> 01:45:22,170
the https API twilio.com and
it's doing a post, right?
2414
01:45:22,170 --> 01:45:24,840
So it feels very similar. So
you're familiar with this.
2415
01:45:24,840 --> 01:45:27,300
There's also a bunch of other
things over here that it
2416
01:45:27,300 --> 01:45:29,730
can do that could get a
little bit distracting.
2417
01:45:29,730 --> 01:45:32,520
And that's what I was
trying to kind of avoid
2418
01:45:32,520 --> 01:45:34,710
'cause I wanted you to
get familiar with it.
2419
01:45:34,710 --> 01:45:36,330
But know that this exists.
2420
01:45:36,330 --> 01:45:39,030
One of the really cool
things that Postman does is
2421
01:45:39,030 --> 01:45:40,553
if you click over here on
this far right over here,
2422
01:45:40,553 --> 01:45:44,100
there's this little code,
it's like open and closed tag.
2423
01:45:44,100 --> 01:45:46,580
This is really neat.
So we have Curl, right?
2424
01:45:46,580 --> 01:45:48,180
So we could see, this
is how I would go ahead
2425
01:45:48,180 --> 01:45:49,950
and do this and this, this
feels familiar, right?
2426
01:45:49,950 --> 01:45:51,150
This is how what we actually did,
2427
01:45:51,150 --> 01:45:53,640
we did this curl statement,
but check this out.
2428
01:45:53,640 --> 01:45:55,620
You can do this in any
programming language.
2429
01:45:55,620 --> 01:45:58,110
So the trick here, the
trick to remember is that
2430
01:45:58,110 --> 01:46:02,490
any programming language that
can make an HTTP request,
2431
01:46:02,490 --> 01:46:04,830
like it has a client built into it,
2432
01:46:04,830 --> 01:46:08,370
because these are all
standard, the REST API, right?
2433
01:46:08,370 --> 01:46:09,990
We're following these constraints that
2434
01:46:09,990 --> 01:46:12,900
have been defined, it can
generate code for you.
2435
01:46:12,900 --> 01:46:15,852
So here's node JS using
a package called Axios.
2436
01:46:15,852 --> 01:46:17,760
So Axios allows you to fetch things.
2437
01:46:17,760 --> 01:46:18,870
So this is what it would look like
2438
01:46:18,870 --> 01:46:20,943
if you tried to write that using Axios.
2439
01:46:22,380 --> 01:46:24,360
And if you look in here,
you come down here,
2440
01:46:24,360 --> 01:46:28,110
here it is in PHP with Guzzle,
I don't know what guzzle is.
2441
01:46:28,110 --> 01:46:30,060
I like that though, that's why I chose it.
2442
01:46:30,060 --> 01:46:32,160
So you could see that it's
generating this code for you.
2443
01:46:32,160 --> 01:46:33,930
And if I copy this and pasted it into
2444
01:46:33,930 --> 01:46:37,436
my PHP code or my Python
code or my Java code,
2445
01:46:37,436 --> 01:46:39,480
it would just work and that's really handy
2446
01:46:39,480 --> 01:46:42,073
that is if the company that's
providing the API doesn't have
2447
01:46:42,073 --> 01:46:45,420
a helper library or an SDK,
a software development kit,
2448
01:46:45,420 --> 01:46:48,118
which we haven't looked at
yet, but we're about ready to,
2449
01:46:48,118 --> 01:46:49,920
Twilio does have one of
those but if you were
2450
01:46:49,920 --> 01:46:51,630
looking at one of these that didn't,
2451
01:46:51,630 --> 01:46:53,599
this is a great way to get that code.
2452
01:46:53,599 --> 01:46:56,055
So again, check out the API network,
2453
01:46:56,055 --> 01:46:58,775
this Postman API network, it's cool.
2454
01:46:58,775 --> 01:47:02,130
I think you're ready now
to use this if you want to.
2455
01:47:02,130 --> 01:47:03,900
But also feel free to use the other tools,
2456
01:47:03,900 --> 01:47:06,690
explore the APIs in a comfortable way,
2457
01:47:06,690 --> 01:47:10,020
wherever you might be
most comfortable with
2458
01:47:10,020 --> 01:47:12,805
'cause there's all sorts
of really fancy tools here
2459
01:47:12,805 --> 01:47:15,832
on Postman and like I said,
there are courses on how
2460
01:47:15,832 --> 01:47:19,770
to take full use of all of
the things that are available.
2461
01:47:19,770 --> 01:47:22,650
Awesome job diving into
all those tools, Postman is
2462
01:47:22,650 --> 01:47:26,340
a super powerful tool and it
keeps getting better every day.
2463
01:47:26,340 --> 01:47:28,005
There are so many features
that we didn't cover.
2464
01:47:28,005 --> 01:47:30,069
We barely even scratched the surface.
2465
01:47:30,069 --> 01:47:32,010
There's an entire course out there on it.
2466
01:47:32,010 --> 01:47:33,910
Check the notes for a way to see that.
2467
01:47:34,800 --> 01:47:36,870
We saw how to organize
our request together
2468
01:47:36,870 --> 01:47:38,880
into collections as well as share common
2469
01:47:38,880 --> 01:47:41,200
and secure values by using variables.
2470
01:47:41,200 --> 01:47:43,620
We learned how to add
different values to request
2471
01:47:43,620 --> 01:47:46,380
both informed values,
query strings and headers.
2472
01:47:46,380 --> 01:47:48,150
And we also saw how to navigate through
2473
01:47:48,150 --> 01:47:51,118
various sub resources via clicking URLs.
2474
01:47:51,118 --> 01:47:53,910
We even saw how to create
actual runnable code from
2475
01:47:53,910 --> 01:47:57,000
your request, while we were
in the Twilio documentation,
2476
01:47:57,000 --> 01:47:58,560
you might have noticed the code examples
2477
01:47:58,560 --> 01:48:00,270
on the screen on that page.
2478
01:48:00,270 --> 01:48:02,700
It's possible the tab
between various language
2479
01:48:02,700 --> 01:48:04,770
implementations and solutions.
2480
01:48:04,770 --> 01:48:07,410
Many products offer
what is known as an SDK
2481
01:48:07,410 --> 01:48:11,160
or software development kit
or helper library that allows
2482
01:48:11,160 --> 01:48:13,860
you to interact with their
product in your native language.
2483
01:48:13,860 --> 01:48:18,000
As you can see, it abstracts
away the REST API completely.
2484
01:48:18,000 --> 01:48:21,090
Let's take a look at the
Twilio helper library next.
2485
01:48:21,090 --> 01:48:23,310
Before that though, just a quick reminder
2486
01:48:23,310 --> 01:48:25,590
to make sure that you check
the notes on this video.
2487
01:48:25,590 --> 01:48:28,230
There's a link to a repository
of built out collections
2488
01:48:28,230 --> 01:48:29,970
that are ready for you to use.
2489
01:48:29,970 --> 01:48:32,313
There are lots of great
APIs to practice with.
2490
01:48:33,300 --> 01:48:34,890
All the tools that we just looked at
2491
01:48:34,890 --> 01:48:37,770
are great for accessing
and exploring APIs.
2492
01:48:37,770 --> 01:48:39,296
However, when it comes time you're
2493
01:48:39,296 --> 01:48:41,820
most likely gonna wanna write some code.
2494
01:48:41,820 --> 01:48:43,020
Now as we saw in Postman,
2495
01:48:43,020 --> 01:48:44,743
you can actually generate code.
2496
01:48:44,743 --> 01:48:47,460
All programming languages
have some sort of way
2497
01:48:47,460 --> 01:48:51,340
of making HTTP requests and
as you know, HTTP requests
2498
01:48:51,340 --> 01:48:55,080
are all we really need to
interact with REST APIs.
2499
01:48:55,080 --> 01:48:57,339
So writing that sort of
code is totally fine,
2500
01:48:57,339 --> 01:48:59,400
but you'll find that
you'll end up writing a lot
2501
01:48:59,400 --> 01:49:01,708
of what is known as boiler plate code.
2502
01:49:01,708 --> 01:49:04,410
By boiler plate I mean
code that is repetitive
2503
01:49:04,410 --> 01:49:07,410
and almost always the same,
just with a few tweaks.
2504
01:49:07,410 --> 01:49:09,330
Many products and services have created
2505
01:49:09,330 --> 01:49:12,030
a solution to help you avoid this problem.
2506
01:49:12,030 --> 01:49:13,770
They're often called helper libraries
2507
01:49:13,770 --> 01:49:16,590
or SDKs, software development kits.
2508
01:49:16,590 --> 01:49:18,810
They'll be specific to
your programming language.
2509
01:49:18,810 --> 01:49:20,400
These libraries help make your code
2510
01:49:20,400 --> 01:49:21,930
more concise and legible.
2511
01:49:21,930 --> 01:49:24,360
They usually also provide
additional documentation
2512
01:49:24,360 --> 01:49:26,820
for your editor, which I find super handy.
2513
01:49:26,820 --> 01:49:28,860
Let's go check out some
of these helper libraries.
2514
01:49:28,860 --> 01:49:31,890
Okay, so let's take a look at
one of these helper libraries.
2515
01:49:31,890 --> 01:49:33,720
Let's take a look at the
first one that's here.
2516
01:49:33,720 --> 01:49:37,470
So again, I'm in the docs SMS,
create a message resource.
2517
01:49:37,470 --> 01:49:39,123
I'm here under the curl
tab currently, remember,
2518
01:49:39,123 --> 01:49:41,190
when we did this, we went
and we saw how to do this.
2519
01:49:41,190 --> 01:49:44,010
We passed the from, the
body, and the to, we passed
2520
01:49:44,010 --> 01:49:46,320
in these environment variables
as what this dollar is.
2521
01:49:46,320 --> 01:49:47,730
And this dollar Twilio Auth token,
2522
01:49:47,730 --> 01:49:49,140
their environment variables
2523
01:49:49,140 --> 01:49:51,930
and it's also used here in the URL.
2524
01:49:51,930 --> 01:49:54,060
So we had done that, we
had done that with Curl.
2525
01:49:54,060 --> 01:49:57,690
Now one of the really nice things about
2526
01:49:57,690 --> 01:50:00,987
these helper libraries is
they look very similar,
2527
01:50:00,987 --> 01:50:03,270
but it's taken away this whole notion.
2528
01:50:03,270 --> 01:50:05,190
So let's go here. I'm
gonna go to this node JS.
2529
01:50:05,190 --> 01:50:09,759
Now, quick word of warning,
if JavaScript is new to you,
2530
01:50:09,759 --> 01:50:12,840
there is some stuff here that
might be a little confusing.
2531
01:50:12,840 --> 01:50:15,003
And I want this to just
kind of wash over you.
2532
01:50:15,003 --> 01:50:19,290
I want you to more feel what
it feels like as I explain it
2533
01:50:19,290 --> 01:50:23,040
and don't be too concerned
with not exactly understanding
2534
01:50:23,040 --> 01:50:24,830
all of the things that can
happen, especially if you're one
2535
01:50:24,830 --> 01:50:29,400
of the folks who has the
Hello World requirement.
2536
01:50:29,400 --> 01:50:30,510
Please don't feel like you need
2537
01:50:30,510 --> 01:50:31,920
to fully understand all this.
2538
01:50:31,920 --> 01:50:34,873
I will walk through this code
line by line and tell you
2539
01:50:34,873 --> 01:50:37,140
what it's doing and it
will be familiar to what
2540
01:50:37,140 --> 01:50:40,050
we've been doing just in
a programming language
2541
01:50:40,050 --> 01:50:42,240
that you might not yet be familiar with.
2542
01:50:42,240 --> 01:50:45,000
So I'll take my time
and you take your time,
2543
01:50:45,000 --> 01:50:46,410
give yourself some patience.
2544
01:50:46,410 --> 01:50:49,650
In fact, I'd like to
suggest that if you are in
2545
01:50:49,650 --> 01:50:51,660
the boat where you have
not written code like this
2546
01:50:51,660 --> 01:50:55,590
before that you watch me
first and then come back
2547
01:50:55,590 --> 01:50:57,300
and do it later, we're
gonna take advantage
2548
01:50:57,300 --> 01:50:58,530
of the fact that we're in a video, right?
2549
01:50:58,530 --> 01:51:00,660
You can take me right back to right here
2550
01:51:00,660 --> 01:51:03,655
and take me back to right
here and we could get started.
2551
01:51:03,655 --> 01:51:05,520
So one of the things that I love about
2552
01:51:05,520 --> 01:51:07,410
Twilio's documentation is that you can
2553
01:51:07,410 --> 01:51:09,780
just copy it and it should work.
2554
01:51:09,780 --> 01:51:10,980
So this is what was happening when
2555
01:51:10,980 --> 01:51:12,480
we created something here, right?
2556
01:51:12,480 --> 01:51:14,212
So we created a message.
2557
01:51:14,212 --> 01:51:17,213
So this is, you get this
authenticated client, right?
2558
01:51:17,213 --> 01:51:18,360
We know what that is.
2559
01:51:18,360 --> 01:51:20,813
We authenticate with our
client, with our account SID
2560
01:51:20,813 --> 01:51:23,220
and our Auth token like we've been doing.
2561
01:51:23,220 --> 01:51:25,950
And then we're gonna do
this messages, a client.
2562
01:51:25,950 --> 01:51:28,408
So client.messages,
there's our REST client,
2563
01:51:28,408 --> 01:51:31,919
.messages.create, and we're
gonna pass in the from the body
2564
01:51:31,919 --> 01:51:34,080
and the to and it's got all
the information that we know.
2565
01:51:34,080 --> 01:51:36,660
And then there's doing some
of this JavaScript stuff.
2566
01:51:36,660 --> 01:51:38,190
So then we're gonna get a promise back
2567
01:51:38,190 --> 01:51:40,350
and then we're gonna get
access to the message.
2568
01:51:40,350 --> 01:51:44,880
And this console log is going
to print out to the screen.
2569
01:51:44,880 --> 01:51:46,110
I don't think we should send a message.
2570
01:51:46,110 --> 01:51:48,150
Why don't we look at the
messages that we've done?
2571
01:51:48,150 --> 01:51:50,130
Let's do that. So I'm
gonna go to that example.
2572
01:51:50,130 --> 01:51:53,940
So I'm gonna choose down
here, this list all messages.
2573
01:51:53,940 --> 01:51:55,350
Awesome, so we'll take a look at all
2574
01:51:55,350 --> 01:51:56,670
of the messages that are in the account.
2575
01:51:56,670 --> 01:51:59,100
Now what I can do is I can just copy this.
2576
01:51:59,100 --> 01:52:00,600
So I'm gonna copy this
2577
01:52:00,600 --> 01:52:02,758
and I'm gonna run it on my local machine.
2578
01:52:02,758 --> 01:52:04,516
Now I'm just exploring,
2579
01:52:04,516 --> 01:52:07,440
and this probably happens
as you're looking at APIs.
2580
01:52:07,440 --> 01:52:12,150
So typically I have a folder
on my computer called Scratch.
2581
01:52:12,150 --> 01:52:15,780
And if you wanna make
one, you do Mkdir Scratch.
2582
01:52:15,780 --> 01:52:17,430
Just kind of put this
wherever you want to.
2583
01:52:17,430 --> 01:52:19,280
And then you get into that directory.
2584
01:52:20,220 --> 01:52:22,650
If you're doing this in
your terminal on Windows,
2585
01:52:22,650 --> 01:52:23,790
there are some instructions in
2586
01:52:23,790 --> 01:52:25,830
the notes on how to do exactly that.
2587
01:52:25,830 --> 01:52:28,560
So now I've got this
directory named Scratch.
2588
01:52:28,560 --> 01:52:31,140
Now I told you before I was
using Visual Studio Code,
2589
01:52:31,140 --> 01:52:32,670
which I hope that you have installed.
2590
01:52:32,670 --> 01:52:36,508
And so I'm gonna do code
dot, and if this doesn't work
2591
01:52:36,508 --> 01:52:38,310
for you, there are instructions on how
2592
01:52:38,310 --> 01:52:40,680
to get this installed
properly on your machine.
2593
01:52:40,680 --> 01:52:42,480
What it should do is pop open
2594
01:52:42,480 --> 01:52:47,480
my Visual Studio code
directly in that directory.
2595
01:52:48,027 --> 01:52:49,560
So I'm in this directory here
2596
01:52:49,560 --> 01:52:51,454
and I'm gonna make a new file here.
2597
01:52:51,454 --> 01:52:54,180
I'm gonna call it explorer.JS
2598
01:52:54,180 --> 01:52:56,370
'cause this is typically what I do.
2599
01:52:56,370 --> 01:53:00,390
So I'm gonna come in here and
I am going to paste that code.
2600
01:53:00,390 --> 01:53:01,980
Awesome, so now I have this code here
2601
01:53:01,980 --> 01:53:06,660
and this code is on my local
machine, which is awesome.
2602
01:53:06,660 --> 01:53:09,300
So now I'm gonna try
to make this code run.
2603
01:53:09,300 --> 01:53:11,700
Now one thing that I
know for sure that I need
2604
01:53:11,700 --> 01:53:13,888
to do is I need to download
the Helper library.
2605
01:53:13,888 --> 01:53:16,690
So if I wanted to go here, I
could go to this node install.
2606
01:53:16,690 --> 01:53:18,690
I happen to know how to do that.
2607
01:53:18,690 --> 01:53:20,910
So I'm gonna go up here under
terminal and I'm gonna do
2608
01:53:20,910 --> 01:53:24,090
New Terminal and in Visual
Studio Code, this is really nice.
2609
01:53:24,090 --> 01:53:26,520
My terminal can actually run
the same terminal that I used
2610
01:53:26,520 --> 01:53:29,754
to open it is running
down here in the bottom.
2611
01:53:29,754 --> 01:53:33,134
And what I'm going to do is
I'm gonna use a package manager
2612
01:53:33,134 --> 01:53:38,134
to install the Twilio Helper library.
2613
01:53:38,190 --> 01:53:41,880
So I'm gonna say NPM Install Twilio.
2614
01:53:41,880 --> 01:53:44,013
So NPM is node package manager.
2615
01:53:44,940 --> 01:53:48,270
And if you do not have
this, if this does not work,
2616
01:53:48,270 --> 01:53:50,370
check the notes because it means that Node
2617
01:53:50,370 --> 01:53:53,640
is probably not installed
on your computer.
2618
01:53:53,640 --> 01:53:54,840
And if Node is not
installed on your computer,
2619
01:53:54,840 --> 01:53:57,690
there is a great walkthrough in the notes
2620
01:53:57,690 --> 01:53:59,490
on how to get Node installed.
2621
01:53:59,490 --> 01:54:03,760
So I now have Twilio
Helper Library installed,
2622
01:54:03,760 --> 01:54:07,200
which means this required Twilio statement
2623
01:54:07,200 --> 01:54:10,620
here is requiring that library.
2624
01:54:10,620 --> 01:54:13,260
Remember in REST Fox how
there was an environment
2625
01:54:13,260 --> 01:54:15,247
and we stored the account
SID and the Auth token?
2626
01:54:15,247 --> 01:54:18,180
We can do the same thing
on our local machine.
2627
01:54:18,180 --> 01:54:19,947
We can set up a little environment here.
2628
01:54:19,947 --> 01:54:21,990
And actually if we go ahead and we click
2629
01:54:21,990 --> 01:54:25,140
this Twilio Secure,
there's some great examples
2630
01:54:25,140 --> 01:54:26,430
in here and how you could do that.
2631
01:54:26,430 --> 01:54:28,410
So one of the things
that this suggests doing,
2632
01:54:28,410 --> 01:54:30,360
you can see it's for Mac
and Linux and different,
2633
01:54:30,360 --> 01:54:32,260
different shelves do different things.
2634
01:54:33,330 --> 01:54:35,010
If you run this in your command line,
2635
01:54:35,010 --> 01:54:37,140
you can set your environment variables
2636
01:54:37,140 --> 01:54:39,060
and then when you run Node it will work.
2637
01:54:39,060 --> 01:54:40,800
I'm gonna do, I'm gonna do this one.
2638
01:54:40,800 --> 01:54:42,820
So I'm gonna copy, copy this here
2639
01:54:44,190 --> 01:54:49,190
and I am going to just paste this.
2640
01:54:49,560 --> 01:54:52,350
We'll paste this, I'll
show you what it does.
2641
01:54:52,350 --> 01:54:56,850
So it's saying we want
to export my account SID
2642
01:54:56,850 --> 01:55:00,180
and my Auth token just we're
very familiar with these days.
2643
01:55:00,180 --> 01:55:05,180
So we're gonna do that.
Let's do this real quick.
2644
01:55:06,570 --> 01:55:10,440
So I'm gonna pop in my
account token there.
2645
01:55:10,440 --> 01:55:13,650
I'm gonna go back over to my console,
2646
01:55:13,650 --> 01:55:17,130
scroll down and grab my account here.
2647
01:55:17,130 --> 01:55:20,940
And then I'm gonna paste
that and I am gonna go
2648
01:55:20,940 --> 01:55:25,940
and grab my Auth token and
I am going to paste that.
2649
01:55:26,340 --> 01:55:31,200
So again, I got to that,
oops, accidentally pasted
2650
01:55:31,200 --> 01:55:33,480
my Auth token in the wrong line there.
2651
01:55:33,480 --> 01:55:37,050
So I know that it started
with a four and I'm gonna
2652
01:55:37,050 --> 01:55:39,600
paste it down here where
it says Your Auth Token.
2653
01:55:39,600 --> 01:55:41,619
So basically what this is
doing is this is writing
2654
01:55:41,619 --> 01:55:44,460
a new file that will
have this information.
2655
01:55:44,460 --> 01:55:45,690
I'll show you that here in a second.
2656
01:55:45,690 --> 01:55:49,080
So there's my, it's gonna
write these two lines.
2657
01:55:49,080 --> 01:55:50,310
I'll show you what that looks like.
2658
01:55:50,310 --> 01:55:53,460
So it's gonna create a new
file called Twilio.env and then
2659
01:55:53,460 --> 01:55:56,220
it's gonna append that that's
what this double --Twilio
2660
01:55:56,220 --> 01:55:57,840
and then it's gonna source that,
2661
01:55:57,840 --> 01:56:01,740
which means run that environment variable.
2662
01:56:01,740 --> 01:56:06,330
So if all is working
well, now if I say Echo
2663
01:56:06,330 --> 01:56:11,330
and I can do Twilio
account SID, we can see
2664
01:56:12,090 --> 01:56:14,100
that I have that
available and that created
2665
01:56:14,100 --> 01:56:16,500
this file here called Twilio.env and you
2666
01:56:16,500 --> 01:56:18,750
can see there is my
account SID and my token,
2667
01:56:18,750 --> 01:56:21,450
which is nice because now this code works,
2668
01:56:21,450 --> 01:56:22,587
it should be working and using this.
2669
01:56:22,587 --> 01:56:26,070
And in fact if all is
going right, so I've got
2670
01:56:26,070 --> 01:56:29,403
Node installed, I installed
the helper library,
2671
01:56:30,300 --> 01:56:34,102
I put my account SID from the console into
2672
01:56:34,102 --> 01:56:37,710
this Twilio.env and then I
did this final command here,
2673
01:56:37,710 --> 01:56:40,770
the source Twilio.env
which will run that file
2674
01:56:40,770 --> 01:56:45,690
and put those variables into
my environment variables.
2675
01:56:45,690 --> 01:56:47,576
And as I showed you
that they were working.
2676
01:56:47,576 --> 01:56:50,520
So let's go ahead and
let's do node explorer.
2677
01:56:50,520 --> 01:56:52,860
So what's gonna happen, let's
take a look really quick.
2678
01:56:52,860 --> 01:56:54,870
I'll show you, let's see, let's
make sure we got it working.
2679
01:56:54,870 --> 01:56:57,838
Cool, we did so let's walk
the code really quick.
2680
01:56:57,838 --> 01:57:01,614
So this is pasted
straight from those docs.
2681
01:57:01,614 --> 01:57:06,271
So we're getting a client back
from this required Twilio,
2682
01:57:06,271 --> 01:57:08,100
this is a Twilio library and when you get
2683
01:57:08,100 --> 01:57:10,380
the Twilio library, if
you pass it in account SID
2684
01:57:10,380 --> 01:57:12,690
and an Auth token, it'll
automatically create
2685
01:57:12,690 --> 01:57:14,730
a brand new REST client for you, right?
2686
01:57:14,730 --> 01:57:16,500
So this is a client that you're able
2687
01:57:16,500 --> 01:57:18,509
to use to hit the REST API, a Twilio.
2688
01:57:18,509 --> 01:57:20,362
And because it knows who you are,
2689
01:57:20,362 --> 01:57:22,620
it's able to access stuff on your behalf.
2690
01:57:22,620 --> 01:57:24,750
So very similar to what we
were doing with the Curl,
2691
01:57:24,750 --> 01:57:27,082
but this client, we can
use this multiple times,
2692
01:57:27,082 --> 01:57:29,010
it will always be authenticated.
2693
01:57:29,010 --> 01:57:31,470
So we're saying of all of the messages,
2694
01:57:31,470 --> 01:57:33,630
we want to list them, right?
2695
01:57:33,630 --> 01:57:35,760
So we wanna get a list
of all of the messages,
2696
01:57:35,760 --> 01:57:37,787
actually not all of
them, only 20 of those.
2697
01:57:37,787 --> 01:57:39,420
So let's go ahead, I'm gonna just,
2698
01:57:39,420 --> 01:57:41,580
we know that we haven't sent
20, I'm gonna get rid of this.
2699
01:57:41,580 --> 01:57:43,860
So you can kind of just
see this other style here.
2700
01:57:43,860 --> 01:57:46,512
So we're gonna say of those,
we're gonna do this list
2701
01:57:46,512 --> 01:57:48,930
and then I'm gonna bring
this back a little bit
2702
01:57:48,930 --> 01:57:51,920
here so you can kind of see, let's change
2703
01:57:51,920 --> 01:57:53,580
the structure of this a little bit.
2704
01:57:53,580 --> 01:57:55,920
So we'll say client messages
2705
01:57:55,920 --> 01:57:57,840
and then we're gonna do a list on those.
2706
01:57:57,840 --> 01:58:02,840
Now the way that this works
is this is asynchronous.
2707
01:58:03,870 --> 01:58:07,500
So JavaScript is asynchronous
and if JavaScript
2708
01:58:07,500 --> 01:58:09,000
is new to you, you probably haven't
2709
01:58:09,000 --> 01:58:12,420
encountered its asynchronous behavior.
2710
01:58:12,420 --> 01:58:14,923
What we're going to go
over here might very well
2711
01:58:14,923 --> 01:58:17,820
be overwhelming, but
it'll make sense someday
2712
01:58:17,820 --> 01:58:20,970
if you stick with it, I promise.
2713
01:58:20,970 --> 01:58:23,340
Now I've added notes, but
really please, please,
2714
01:58:23,340 --> 01:58:25,590
please, please do not
let this stress you out.
2715
01:58:25,590 --> 01:58:28,770
I just want this to go
over your mind about
2716
01:58:28,770 --> 01:58:32,853
what's happening here and
it's important to understand
2717
01:58:32,853 --> 01:58:37,853
because our client here, these
list methods are asynchronous
2718
01:58:38,340 --> 01:58:40,995
that which means that
it's gonna go and run Auth
2719
01:58:40,995 --> 01:58:44,760
and do some things and then
it's going to come back.
2720
01:58:44,760 --> 01:58:47,108
When that comes back,
it's gonna run this code.
2721
01:58:47,108 --> 01:58:49,160
So this is how a promise works.
2722
01:58:49,160 --> 01:58:52,644
So it's going to say then
after you go and make
2723
01:58:52,644 --> 01:58:57,124
that request, then give me
the messages and just so you,
2724
01:58:57,124 --> 01:58:58,950
what's kind of strange about that is if
2725
01:58:58,950 --> 01:59:01,560
you're probably used to
code working like this.
2726
01:59:01,560 --> 01:59:02,880
So I'm gonna write out to the screen
2727
01:59:02,880 --> 01:59:04,740
that's this console log.
2728
01:59:04,740 --> 01:59:08,918
I'm gonna say Starting Program.
2729
01:59:08,918 --> 01:59:10,860
And we should see that line print.
2730
01:59:10,860 --> 01:59:13,830
Now you might think that
this is going to print,
2731
01:59:13,830 --> 01:59:15,930
it's gonna run this and
then go, but if you,
2732
01:59:15,930 --> 01:59:17,760
I'll show you here, if
I do this console log
2733
01:59:17,760 --> 01:59:22,760
and I say gathering message
log, what you'll see is
2734
01:59:24,870 --> 01:59:27,630
it's gonna say this,
this line's gonna start,
2735
01:59:27,630 --> 01:59:29,760
but immediately it's
gonna go to the next line.
2736
01:59:29,760 --> 01:59:31,913
So let's do that. Let's
run that one more time.
2737
01:59:33,780 --> 01:59:35,760
I didn't save it. So of
course it won't do anything.
2738
01:59:35,760 --> 01:59:37,740
So you can see this little
dot here in visual studio.
2739
01:59:37,740 --> 01:59:39,480
It didn't save, so I'm gonna save that,
2740
01:59:39,480 --> 01:59:41,331
run that one more time, here we go.
2741
01:59:41,331 --> 01:59:42,900
And you'll see right away it's
2742
01:59:42,900 --> 01:59:45,030
a starting program gathering message log.
2743
01:59:45,030 --> 01:59:47,610
So it ran this, but then
it went down to here.
2744
01:59:47,610 --> 01:59:50,310
So it did not wait because
this is asynchronous.
2745
01:59:50,310 --> 01:59:54,150
What's happening here is
asynchronous and what's happening
2746
01:59:54,150 --> 01:59:57,900
is client message list returns a promise.
2747
01:59:57,900 --> 02:00:00,769
Now it's a promise that
in the future there
2748
02:00:00,769 --> 02:00:04,947
will be a value and
that value is messages.
2749
02:00:04,947 --> 02:00:06,840
And so the way that you
write that code is this
2750
02:00:06,840 --> 02:00:09,507
then waits, it defines a function here
2751
02:00:09,507 --> 02:00:12,300
and as soon as this is done,
it will run this function.
2752
02:00:12,300 --> 02:00:14,070
As soon as they come back,
it will run the function.
2753
02:00:14,070 --> 02:00:14,940
So that's what happened, right?
2754
02:00:14,940 --> 02:00:18,723
So it came, it started,
it then ran the function.
2755
02:00:20,040 --> 02:00:22,050
And when I say function,
you might not have seen
2756
02:00:22,050 --> 02:00:27,050
this before, but in JavaScript
you can make a function.
2757
02:00:27,630 --> 02:00:29,070
I'm gonna put parentheses here
2758
02:00:29,070 --> 02:00:30,690
so it's a little bit more clear.
2759
02:00:30,690 --> 02:00:32,670
These are the parameters for the function.
2760
02:00:32,670 --> 02:00:33,948
And this fat arrow is saying, this is
2761
02:00:33,948 --> 02:00:36,330
what happens when the function runs,
2762
02:00:36,330 --> 02:00:38,070
this like little, they
call it the fat arrow.
2763
02:00:38,070 --> 02:00:38,903
It's kind of cute, right?
2764
02:00:38,903 --> 02:00:40,270
So it's an equal sign
and then a greater than,
2765
02:00:40,270 --> 02:00:42,420
it's called a fat arrow and that's a way
2766
02:00:42,420 --> 02:00:45,092
of quickly defining a function
and so you can see here,
2767
02:00:45,092 --> 02:00:48,120
there's another one here
that's doing it as well.
2768
02:00:48,120 --> 02:00:52,043
So it could be a little bit
messy as you're looking in.
2769
02:00:52,043 --> 02:00:54,480
See how all these parens
that we're looking at,
2770
02:00:54,480 --> 02:00:57,030
it's kind of kind of hard
to understand and read.
2771
02:00:57,030 --> 02:00:58,230
If this is your first
time looking at that,
2772
02:00:58,230 --> 02:01:03,230
I totally feel for you
and so this messages
2773
02:01:03,270 --> 02:01:05,610
that comes through here is an array.
2774
02:01:05,610 --> 02:01:10,050
So, what was very nice is it
came across this messages list.
2775
02:01:10,050 --> 02:01:13,440
This is an array, it was a
JavaScript array by itself.
2776
02:01:13,440 --> 02:01:15,227
They have this method
called For Each on it.
2777
02:01:15,227 --> 02:01:18,210
And it will let you loop
through each of the values
2778
02:01:18,210 --> 02:01:21,499
that are in an array and
you'll notice that the object
2779
02:01:21,499 --> 02:01:23,970
that was inside of that
array has some properties.
2780
02:01:23,970 --> 02:01:27,960
So what happened was the client
went and made the request,
2781
02:01:27,960 --> 02:01:31,530
made the http request, it got
back that JSON that we saw.
2782
02:01:31,530 --> 02:01:34,110
Let me just go show you one more time.
2783
02:01:34,110 --> 02:01:35,890
Let's make sure that we're
looking at the right thing here.
2784
02:01:35,890 --> 02:01:39,720
So we, this is the same
code that we just saw.
2785
02:01:39,720 --> 02:01:41,700
This JSON was returned, right?
2786
02:01:41,700 --> 02:01:43,800
This JSON was returned,
but what the client did
2787
02:01:43,800 --> 02:01:47,220
for us was it inflated
these into messages, right?
2788
02:01:47,220 --> 02:01:50,727
So these are, this is a string of things
2789
02:01:50,727 --> 02:01:54,540
and it came back JSON but
I'm able to actually work
2790
02:01:54,540 --> 02:01:58,200
with each of these messages
as if they're an object.
2791
02:01:58,200 --> 02:01:59,690
So let's look at that again.
2792
02:01:59,690 --> 02:02:04,690
So list returned this object,
this array of messages
2793
02:02:05,880 --> 02:02:08,040
and each one of those in that array
2794
02:02:08,040 --> 02:02:10,020
I'm able to use an array method for each.
2795
02:02:10,020 --> 02:02:11,968
And this message is an actual object
2796
02:02:11,968 --> 02:02:15,660
that has a property called SID.
2797
02:02:15,660 --> 02:02:19,438
So again, if that is all
new JavaScript terms to you,
2798
02:02:19,438 --> 02:02:20,910
don't worry too much about it.
2799
02:02:20,910 --> 02:02:23,850
Basically we went and got
the messages and we showed
2800
02:02:23,850 --> 02:02:26,453
the messages that we got,
that's what this is saying.
2801
02:02:27,300 --> 02:02:28,996
One of the things that
I want you to be careful
2802
02:02:28,996 --> 02:02:31,890
of as you're looking at
promises, and you might see
2803
02:02:31,890 --> 02:02:34,440
this sometimes as you work
with APIs, 'cause oftentimes
2804
02:02:34,440 --> 02:02:37,470
APIs that you hit are going
to be asynchronous like this.
2805
02:02:37,470 --> 02:02:40,857
You might see that you need to be able to,
2806
02:02:40,857 --> 02:02:42,390
you might run into an error
2807
02:02:42,390 --> 02:02:45,150
and what might happen is
it might get swallowed.
2808
02:02:45,150 --> 02:02:46,640
In fact, let me cause one to happen.
2809
02:02:46,640 --> 02:02:49,290
So here it's supposed to say Auth token,
2810
02:02:49,290 --> 02:02:52,950
I'm just gonna put in my luggage,
2811
02:02:52,950 --> 02:02:55,020
the password to my
luggage 1, 2, 3, 4, 5, 6.
2812
02:02:55,020 --> 02:02:58,620
So that is not my account
SID that is going in there.
2813
02:02:58,620 --> 02:02:59,790
So I had the wrong account SID.
2814
02:02:59,790 --> 02:03:02,400
So I'm gonna say that
hey this is the client,
2815
02:03:02,400 --> 02:03:03,990
this is what how I want
you to authenticate
2816
02:03:03,990 --> 02:03:06,360
and it's gonna go to try to
make this and it's gonna fail.
2817
02:03:06,360 --> 02:03:08,523
Let's see what happens when it fails.
2818
02:03:11,970 --> 02:03:14,940
Well I didn't save it
so let's save it again.
2819
02:03:14,940 --> 02:03:16,440
Boy that's a lesson that
I really hit in the home.
2820
02:03:16,440 --> 02:03:17,610
You gotta make sure you save your file
2821
02:03:17,610 --> 02:03:18,450
or the code doesn't run.
2822
02:03:18,450 --> 02:03:21,062
So let's do it again, and
you'll notice that I didn't
2823
02:03:21,062 --> 02:03:24,289
get any error at all and
that can be confusing,
2824
02:03:24,289 --> 02:03:26,760
that is something that is very strange
2825
02:03:26,760 --> 02:03:29,070
because obviously
something wrong happened,
2826
02:03:29,070 --> 02:03:31,050
I didn't get any of the messages back,
2827
02:03:31,050 --> 02:03:33,360
but it doesn't look
like I had any problems.
2828
02:03:33,360 --> 02:03:36,180
So what's happening 'cause
this is running asynchronously,
2829
02:03:36,180 --> 02:03:37,920
this then never runs, right?
2830
02:03:37,920 --> 02:03:39,540
We never get a chance to run this 'cause
2831
02:03:39,540 --> 02:03:43,230
this list method didn't
actually finish working.
2832
02:03:43,230 --> 02:03:46,140
So one of the things you always
wanna make sure that you do
2833
02:03:46,140 --> 02:03:50,160
is to every promise you can
catch and you can catch an error
2834
02:03:50,160 --> 02:03:52,230
and I'm gonna make a fat
arrow 'cause I'm gonna have
2835
02:03:52,230 --> 02:03:56,670
a function happen here that
says console dot error, E-R-R.
2836
02:03:56,670 --> 02:03:58,350
Okay, so now I'm gonna print that out,
2837
02:03:58,350 --> 02:03:59,460
I'm gonna print out the error.
2838
02:03:59,460 --> 02:04:01,530
Let's run that again,
let's see what happens.
2839
02:04:01,530 --> 02:04:04,230
Ah, now we see the error and you'll see
2840
02:04:04,230 --> 02:04:06,594
that sometimes this is what comes back
2841
02:04:06,594 --> 02:04:08,579
is there was an
authentication error, right?
2842
02:04:08,579 --> 02:04:12,120
And we got a very specific
error on this 2003
2843
02:04:12,120 --> 02:04:15,120
and it will help us kind of
look at what's happening.
2844
02:04:15,120 --> 02:04:16,350
Oh, here, great. This is right.
2845
02:04:16,350 --> 02:04:17,850
My Auth token is wrong,
2846
02:04:17,850 --> 02:04:20,040
the wrong combination of
account SID and Auth token.
2847
02:04:20,040 --> 02:04:21,716
Exactly. That is what has happened.
2848
02:04:21,716 --> 02:04:24,750
So cool use of things there.
2849
02:04:24,750 --> 02:04:27,500
I'm gonna put this back so
that we have things working.
2850
02:04:28,890 --> 02:04:30,242
So this was Auth token
2851
02:04:30,242 --> 02:04:32,100
and I can still leave my error in there.
2852
02:04:32,100 --> 02:04:33,900
I'm not gonna hit an error,
so it's not gonna happen.
2853
02:04:33,900 --> 02:04:38,040
So a promise has a then and
it also has a catch, right?
2854
02:04:38,040 --> 02:04:39,120
So let's do that.
2855
02:04:39,120 --> 02:04:42,510
So I'm gonna run that one
more time and save it.
2856
02:04:42,510 --> 02:04:46,470
Wow y'all, I gotta get
better at saving. Here we go.
2857
02:04:46,470 --> 02:04:49,590
There we go. So now we're back
to working again, awesome.
2858
02:04:49,590 --> 02:04:51,300
All right, I wanna show you a little bit
2859
02:04:51,300 --> 02:04:54,354
of a different way that
JavaScript can work
2860
02:04:54,354 --> 02:04:57,540
asynchronously that you might also see.
2861
02:04:57,540 --> 02:05:00,120
And this is really syntactical sugar.
2862
02:05:00,120 --> 02:05:01,860
It's called async a weight
2863
02:05:01,860 --> 02:05:05,580
and if you just wait a
bit, it'll all sink in.
2864
02:05:05,580 --> 02:05:09,566
I promise that's a, there
was three jokes in that one.
2865
02:05:09,566 --> 02:05:12,330
That was a hat trick of a
joke. All right, so here we go.
2866
02:05:12,330 --> 02:05:15,960
So the way that it works,
the way that this works is
2867
02:05:15,960 --> 02:05:19,860
you can say that a function
is going to be asynchronous
2868
02:05:19,860 --> 02:05:24,860
and we want this to run
asynchronously, so I was thinking
2869
02:05:25,336 --> 02:05:27,870
we're getting ready to
start using our number in
2870
02:05:27,870 --> 02:05:30,150
an application and to get
there we need to clean it up.
2871
02:05:30,150 --> 02:05:32,070
We have a bunch of weird
messages in there that aren't
2872
02:05:32,070 --> 02:05:34,350
gonna be relevant to the
messages that we have.
2873
02:05:34,350 --> 02:05:37,530
So I'm gonna make a new
function and I'm gonna
2874
02:05:37,530 --> 02:05:39,990
call it "Delete All Messages," okay?
2875
02:05:39,990 --> 02:05:42,217
And when you define a
function, you can kind of put,
2876
02:05:42,217 --> 02:05:43,980
this is the parameters that it takes.
2877
02:05:43,980 --> 02:05:45,450
We're not gonna say that,
there are no parameters.
2878
02:05:45,450 --> 02:05:47,583
And then I'm gonna run this function.
2879
02:05:48,750 --> 02:05:52,890
So while this is an asynchronous function,
2880
02:05:52,890 --> 02:05:57,269
I can actually make it look
more like it is in line
2881
02:05:57,269 --> 02:06:00,300
so it can kind of run the
way that we want it to.
2882
02:06:00,300 --> 02:06:04,673
So I'm gonna say "const
messages" equals await.
2883
02:06:05,730 --> 02:06:09,720
So now I have, because the
function itself is asynchronous
2884
02:06:09,720 --> 02:06:12,690
'cause I've used this here I
can use this keyword, await,
2885
02:06:12,690 --> 02:06:17,690
and I'm gonna say client
dot messages dot list.
2886
02:06:19,020 --> 02:06:22,050
And so now I think this is a
little bit more clear, right?
2887
02:06:22,050 --> 02:06:24,600
So this is basically doing
the same thing, right?
2888
02:06:24,600 --> 02:06:27,960
These messages are the same
messages that were coming
2889
02:06:27,960 --> 02:06:30,690
into this function, but
now it's out on this side.
2890
02:06:30,690 --> 02:06:33,925
So I have this variable
that's called messages.
2891
02:06:33,925 --> 02:06:36,455
So, and that's in array, right?
2892
02:06:36,455 --> 02:06:39,477
And I could do this exact same thing here
2893
02:06:39,477 --> 02:06:41,639
and I could list that the same way.
2894
02:06:41,639 --> 02:06:43,560
But let's go a little bit farther.
2895
02:06:43,560 --> 02:06:46,307
So I'm gonna say for each of the messages,
2896
02:06:46,307 --> 02:06:50,943
for each message that is
of the messages array.
2897
02:06:51,990 --> 02:06:54,693
So these are those inflated
messages that we saw.
2898
02:06:55,860 --> 02:06:59,190
One of the cool things
that you're able to do
2899
02:06:59,190 --> 02:07:03,240
with the client is the
object that's returned back
2900
02:07:03,240 --> 02:07:05,160
has actually has some properties on 'em.
2901
02:07:05,160 --> 02:07:08,493
And one of those properties
that it has is called Delete.
2902
02:07:09,330 --> 02:07:11,700
Before we do that, I'm
gonna make sure that,
2903
02:07:11,700 --> 02:07:13,950
let's do a warning here real quick.
2904
02:07:13,950 --> 02:07:17,908
So I'm gonna say console
dot warn, we're gonna say
2905
02:07:17,908 --> 02:07:22,650
would have deleted,
I'm actually gonna use,
2906
02:07:22,650 --> 02:07:25,020
if you use these back ticks,
this is kind of a neat trick.
2907
02:07:25,020 --> 02:07:28,260
You can use this back tick
to do string interpolation.
2908
02:07:28,260 --> 02:07:32,100
So we'll say would have
deleted message dot SID.
2909
02:07:32,100 --> 02:07:35,280
So again, that's the
string identifier of that.
2910
02:07:35,280 --> 02:07:38,340
So would've deleted message dot SID.
2911
02:07:38,340 --> 02:07:41,850
So, and we will close that
function out. All right?
2912
02:07:41,850 --> 02:07:45,300
And now I'm going to call
that function in this,
2913
02:07:45,300 --> 02:07:47,280
you know, of course that's how we call it.
2914
02:07:47,280 --> 02:07:48,990
And this is would actually be a promise,
2915
02:07:48,990 --> 02:07:50,340
this would be a very
similar, so we could do this,
2916
02:07:50,340 --> 02:07:53,280
we could do a then, well
in fact let's do it,
2917
02:07:53,280 --> 02:07:57,660
we'll say then, and if you wanted to call,
2918
02:07:57,660 --> 02:07:59,250
make a function that has no parameters
2919
02:07:59,250 --> 02:08:00,600
'cause I'm not returning anything, right?
2920
02:08:00,600 --> 02:08:02,700
I'm not returning anything
from that function.
2921
02:08:02,700 --> 02:08:04,770
I'm just gonna say console dot log.
2922
02:08:04,770 --> 02:08:08,430
And I'm gonna write done
and I will put all of these,
2923
02:08:08,430 --> 02:08:12,780
this code into the notes
so you can also copy
2924
02:08:12,780 --> 02:08:14,430
and paste it if you want to.
2925
02:08:14,430 --> 02:08:16,020
And I'm gonna do the same
thing that I did before.
2926
02:08:16,020 --> 02:08:19,470
Catch the error and I'll do
will do console dot error.
2927
02:08:19,470 --> 02:08:21,210
And now if you do the
console is, you know,
2928
02:08:21,210 --> 02:08:23,100
of course what's running
when the program runs,
2929
02:08:23,100 --> 02:08:25,350
it's running out to the screen
and there's different levels
2930
02:08:25,350 --> 02:08:27,526
that you can do and error is one of those.
2931
02:08:27,526 --> 02:08:29,610
And if I just pass the
error that happened there,
2932
02:08:29,610 --> 02:08:33,210
so I'm gonna warn that we would've deleted
2933
02:08:33,210 --> 02:08:35,760
the message but let's take
a look at what happened.
2934
02:08:35,760 --> 02:08:37,050
So I'm gonna get rid,
2935
02:08:37,050 --> 02:08:39,180
I'm gonna keep the starting
program here, right?
2936
02:08:39,180 --> 02:08:41,890
So we can do starting program
2937
02:08:45,060 --> 02:08:47,850
and then it's gonna do
delete all messages,
2938
02:08:47,850 --> 02:08:49,740
it's gonna call that and
then when it's all done,
2939
02:08:49,740 --> 02:08:53,820
it will say done, I'm gonna
get rid of what we had here.
2940
02:08:53,820 --> 02:08:57,600
Okay, so we have delete all
messages, it's gonna go in,
2941
02:08:57,600 --> 02:08:59,430
it's gonna get a list
of all of the messages.
2942
02:08:59,430 --> 02:09:01,620
It's gonna loop through
each one of those messages.
2943
02:09:01,620 --> 02:09:04,006
And when it is done, we're gonna,
2944
02:09:04,006 --> 02:09:07,620
right now we're gonna warn
that it's would have deleted it
2945
02:09:07,620 --> 02:09:11,820
and this is what we're
eventually going to do
2946
02:09:11,820 --> 02:09:13,710
because there's a function
that's available to it.
2947
02:09:13,710 --> 02:09:15,960
All right? So I'm gonna
save that, I'm gonna run it.
2948
02:09:15,960 --> 02:09:18,450
Let's see what happens. Okay?
2949
02:09:18,450 --> 02:09:20,520
So it would've deleted some of our SIDs.
2950
02:09:20,520 --> 02:09:22,773
And again this is the
MM, this is, the MM means
2951
02:09:22,773 --> 02:09:25,200
that it was the MMS which is the one with
2952
02:09:25,200 --> 02:09:27,360
the picture and the rest
of the SM's that we have.
2953
02:09:27,360 --> 02:09:30,240
So I think I am ready to do this.
2954
02:09:30,240 --> 02:09:32,730
I hope that you are
ready to do this as well.
2955
02:09:32,730 --> 02:09:37,730
Again, this code should
you want it is available
2956
02:09:37,830 --> 02:09:40,877
in the repo 'cause you want to run this
2957
02:09:40,877 --> 02:09:43,830
'cause you want to delete these messages.
2958
02:09:43,830 --> 02:09:46,230
So let's, I'm gonna
say, I would've deleted,
2959
02:09:46,230 --> 02:09:51,000
I'm gonna say deleting
and then here we go.
2960
02:09:51,000 --> 02:09:53,670
I'm gonna save that, I'm gonna run it.
2961
02:09:53,670 --> 02:09:57,300
And so message, the message
object that's coming back
2962
02:09:57,300 --> 02:10:00,929
from this client is really
has enough information
2963
02:10:00,929 --> 02:10:04,770
to make another API call
to delete itself, right?
2964
02:10:04,770 --> 02:10:09,420
Because the object itself
knows how to do that
2965
02:10:09,420 --> 02:10:11,820
the library's made an
object that is smart enough
2966
02:10:11,820 --> 02:10:14,530
to be able to call delete
on it and it feels like
2967
02:10:15,780 --> 02:10:17,790
it's just working that
way, but it's really making
2968
02:10:17,790 --> 02:10:20,370
a REST API call to make a delete request.
2969
02:10:20,370 --> 02:10:22,120
It's pretty cool right? Here we go.
2970
02:10:24,900 --> 02:10:26,940
Message dot delete is not a function.
2971
02:10:26,940 --> 02:10:29,460
What I meant was actually remove,
2972
02:10:29,460 --> 02:10:32,169
so the function name is
remove on the message.
2973
02:10:32,169 --> 02:10:33,540
So here we go.
2974
02:10:33,540 --> 02:10:36,090
So, and you saw that
there was an error, right?
2975
02:10:36,090 --> 02:10:37,380
That was the error that just happened,
2976
02:10:37,380 --> 02:10:38,430
good thing I put that catch in there,
2977
02:10:38,430 --> 02:10:40,110
otherwise we would've thought it worked.
2978
02:10:40,110 --> 02:10:42,030
So here we go, so in Node explorer,
2979
02:10:42,030 --> 02:10:44,220
remove instead deleting,
deleting, deleting.
2980
02:10:44,220 --> 02:10:46,140
We deleted all of those.
2981
02:10:46,140 --> 02:10:48,630
So remove is the name of
the function that's there,
2982
02:10:48,630 --> 02:10:52,350
but it is doing a delete,
making a delete call.
2983
02:10:52,350 --> 02:10:55,020
Cool, so we have now
cleaned out and if we try
2984
02:10:55,020 --> 02:10:56,430
to run it again, you'll see that there's
2985
02:10:56,430 --> 02:10:59,160
no messages left for it to delete.
2986
02:10:59,160 --> 02:11:02,940
Awesome, now if you have just watched that
2987
02:11:02,940 --> 02:11:05,539
and were very confused,
let's walk this last bit
2988
02:11:05,539 --> 02:11:07,740
and then I want you to
rewind it one more time.
2989
02:11:07,740 --> 02:11:11,040
So I've made a function
that is asynchronous
2990
02:11:11,040 --> 02:11:13,791
and that function is
called delete all messages.
2991
02:11:13,791 --> 02:11:15,600
And because it's asynchronous,
2992
02:11:15,600 --> 02:11:18,600
I'm able to use this await
which will return this,
2993
02:11:18,600 --> 02:11:22,470
this client messages, that
list returns a promise, okay?
2994
02:11:22,470 --> 02:11:24,480
But, and a promise of the future.
2995
02:11:24,480 --> 02:11:25,920
But because it's being awaited,
2996
02:11:25,920 --> 02:11:28,680
it's going to return
it right here in line.
2997
02:11:28,680 --> 02:11:31,070
Then I'm gonna loop through
each of those messages
2998
02:11:31,070 --> 02:11:34,407
and because that message
came back from the API
2999
02:11:34,407 --> 02:11:37,440
and an object was created
thanks to our helper library
3000
02:11:37,440 --> 02:11:42,440
here I have a method on
that message called remove.
3001
02:11:42,990 --> 02:11:45,690
And it will actually go
and do that next level,
3002
02:11:45,690 --> 02:11:47,340
the next level of delete there for me.
3003
02:11:47,340 --> 02:11:48,480
So it's really nice.
3004
02:11:48,480 --> 02:11:52,200
This object feels like
it would feel if you were
3005
02:11:52,200 --> 02:11:55,950
writing JavaScript code,
it would feel this way.
3006
02:11:55,950 --> 02:11:58,350
But behind the scenes
we know that it's doing
3007
02:11:58,350 --> 02:12:00,210
this API calls and the client library
3008
02:12:00,210 --> 02:12:02,974
has extracted all of that away from us.
3009
02:12:02,974 --> 02:12:05,249
And if now if you go and you take a look,
3010
02:12:05,249 --> 02:12:07,710
let's go back really
quick, let's take a look.
3011
02:12:07,710 --> 02:12:08,910
There's other helper libraries.
3012
02:12:08,910 --> 02:12:11,490
So if Python happens to be your language,
3013
02:12:11,490 --> 02:12:12,720
there's how you do it.
3014
02:12:12,720 --> 02:12:16,260
So it's client messages dot
list and for record and messages
3015
02:12:16,260 --> 02:12:18,330
and you print the record SID
and you can see that the code
3016
02:12:18,330 --> 02:12:20,790
looks a little bit different
in all of the languages
3017
02:12:20,790 --> 02:12:23,730
that you go through, but
it's also kind of similar.
3018
02:12:23,730 --> 02:12:26,100
And so that's really nice
about the standardness
3019
02:12:26,100 --> 02:12:30,210
of a REST API is that the helper library
3020
02:12:30,210 --> 02:12:32,302
is producing code that feels the same
3021
02:12:32,302 --> 02:12:35,040
in each way because the
library's kind of the same.
3022
02:12:35,040 --> 02:12:38,487
And you'll find that as you use other APIs
3023
02:12:38,487 --> 02:12:40,290
and they have helper libraries,
3024
02:12:40,290 --> 02:12:43,260
they will mimic the way
that the REST API looks.
3025
02:12:43,260 --> 02:12:46,290
So I realize that was a lot.
3026
02:12:46,290 --> 02:12:48,180
I don't want you to get
hung up if you feel like
3027
02:12:48,180 --> 02:12:51,360
you can't completely
understand what that is.
3028
02:12:51,360 --> 02:12:53,850
In the next unit what we're
gonna do is we're gonna go
3029
02:12:53,850 --> 02:12:58,682
into more deep things and
I know you can do this.
3030
02:12:58,682 --> 02:13:02,160
So, this code is there
and also if you feel like
3031
02:13:02,160 --> 02:13:04,461
you want me to go back and
explain that again, please,
3032
02:13:04,461 --> 02:13:07,413
please, please, please
pause me, slow me down,
3033
02:13:07,413 --> 02:13:09,570
let me walk through those different things
3034
02:13:09,570 --> 02:13:11,535
but don't feel like you need
to be able to read this.
3035
02:13:11,535 --> 02:13:14,798
I want you to just conceptually
understand that you're using
3036
02:13:14,798 --> 02:13:18,960
a helper library that's
abstracting away all
3037
02:13:18,960 --> 02:13:22,078
of the HTTP API things that we were doing
3038
02:13:22,078 --> 02:13:25,200
with curl and we are doing with REST Fox.
3039
02:13:25,200 --> 02:13:28,260
This is just doing it in code
and it's doing it for you.
3040
02:13:28,260 --> 02:13:33,260
A lot of the magic is gone and
hidden and tucked away and it
3041
02:13:33,270 --> 02:13:36,480
just feels like you're actually
working with these objects.
3042
02:13:36,480 --> 02:13:39,780
That's the power of the
abstraction. Awesome.
3043
02:13:39,780 --> 02:13:42,510
Did you see how the helper
libraries are all similar yet
3044
02:13:42,510 --> 02:13:45,660
match the development workflow
and style of each language?
3045
02:13:45,660 --> 02:13:48,360
This is one of the benefits of
helper libraries in general.
3046
02:13:48,360 --> 02:13:51,270
They abstract away the
HTTP client connection
3047
02:13:51,270 --> 02:13:54,240
and the boiler plate necessary
to make REST API calls.
3048
02:13:54,240 --> 02:13:57,450
They also behave as you
expect them to behave.
3049
02:13:57,450 --> 02:13:59,323
It feels natural.
3050
02:13:59,323 --> 02:14:02,550
The way that we were able to
delete from the resource itself
3051
02:14:02,550 --> 02:14:05,160
helps to unlock another
REST API constraint
3052
02:14:05,160 --> 02:14:09,130
scavenger hunt item and
that one is uniform design.
3053
02:14:09,130 --> 02:14:11,725
Now this constraint has four subsections,
3054
02:14:11,725 --> 02:14:15,050
one of which we just discussed,
resource manipulation
3055
02:14:15,050 --> 02:14:18,180
through representations,
because enough information
3056
02:14:18,180 --> 02:14:20,100
was included in the response, it was clear
3057
02:14:20,100 --> 02:14:23,520
for us how we could modify
and delete the resource.
3058
02:14:23,520 --> 02:14:24,877
Another subsection and here is
3059
02:14:24,877 --> 02:14:27,510
resource identification and requests.
3060
02:14:27,510 --> 02:14:29,967
That's the URIs that are
included and we've seen that.
3061
02:14:29,967 --> 02:14:32,828
But because the URIs are included we know
3062
02:14:32,828 --> 02:14:36,210
how to get and manipulate
specific resources.
3063
02:14:36,210 --> 02:14:40,260
Uniform use of the http
verbs is pretty powerful.
3064
02:14:40,260 --> 02:14:41,250
We just wrote some scripts
3065
02:14:41,250 --> 02:14:42,780
that make use of helper libraries.
3066
02:14:42,780 --> 02:14:44,280
These libraries are super handy for
3067
02:14:44,280 --> 02:14:46,530
automation based tasks or batch scripting,
3068
02:14:46,530 --> 02:14:49,050
which is like making a whole
bunch of calls at once.
3069
02:14:49,050 --> 02:14:51,480
Now while we're talking
about this, we should cover
3070
02:14:51,480 --> 02:14:54,390
another common tool for
talking to external APIs
3071
02:14:54,390 --> 02:14:57,938
and that one is CLI,
command line interface.
3072
02:14:57,938 --> 02:14:59,850
There it is again.
3073
02:14:59,850 --> 02:15:01,860
Command line interfaces
can be used to make
3074
02:15:01,860 --> 02:15:04,380
API calls from an
executable on your machine.
3075
02:15:04,380 --> 02:15:07,200
More and more these are showing
up for tools that require
3076
02:15:07,200 --> 02:15:09,744
authentication and do a
bunch of different services.
3077
02:15:09,744 --> 02:15:12,480
This concept is popular
amongst cloud providers
3078
02:15:12,480 --> 02:15:13,740
where setting something up needs to
3079
02:15:13,740 --> 02:15:15,750
be done quickly from the command line.
3080
02:15:15,750 --> 02:15:16,927
Check the notes for more.
3081
02:15:16,927 --> 02:15:19,470
Another commonplace where
you'll use helper libraries
3082
02:15:19,470 --> 02:15:21,535
is from within applications
that you're building.
3083
02:15:21,535 --> 02:15:24,450
Let's get to the final unit
of this course and implement
3084
02:15:24,450 --> 02:15:27,261
an external API into an
existing web application.
3085
02:15:27,261 --> 02:15:30,030
You've got this. Ooh, we're here.
3086
02:15:30,030 --> 02:15:32,130
I love this part. The building part.
3087
02:15:32,130 --> 02:15:34,800
We are going to build a web
application that shows off
3088
02:15:34,800 --> 02:15:37,530
a set of user submitted
photos for a specific prompt.
3089
02:15:37,530 --> 02:15:39,120
But here's where our app is gonna
3090
02:15:39,120 --> 02:15:40,620
stick out from all the rest.
3091
02:15:40,620 --> 02:15:42,600
We are gonna let our
users submit their photos
3092
02:15:42,600 --> 02:15:44,880
and captions via a text message.
3093
02:15:44,880 --> 02:15:46,860
What this will enable
us to do is put up signs
3094
02:15:46,860 --> 02:15:48,411
and billboards and
physical spaces that says
3095
02:15:48,411 --> 02:15:51,240
text a photo to this
number and then our site
3096
02:15:51,240 --> 02:15:53,790
will gather those on a
webpage and display them.
3097
02:15:53,790 --> 02:15:55,620
Now you're probably wondering
two things right now.
3098
02:15:55,620 --> 02:15:57,611
The first one is probably, wait,
3099
02:15:57,611 --> 02:16:00,270
what are those photos
they're gonna be texting?
3100
02:16:00,270 --> 02:16:01,830
And that's a great question.
3101
02:16:01,830 --> 02:16:02,663
We are gonna be building
3102
02:16:02,663 --> 02:16:04,620
this application so it can be dynamic.
3103
02:16:04,620 --> 02:16:06,270
So you can define whatever you want.
3104
02:16:06,270 --> 02:16:08,730
Like text me a photo of your dog,
3105
02:16:08,730 --> 02:16:11,399
send us a photo of the
view out your window.
3106
02:16:11,399 --> 02:16:14,160
Snap me a pic of the
best impersonation of me.
3107
02:16:14,160 --> 02:16:16,260
I don't know, anything along those lines.
3108
02:16:16,260 --> 02:16:20,100
Now secondly, you're probably
wondering, wait a second,
3109
02:16:20,100 --> 02:16:22,860
you said I didn't need
to know how to code.
3110
02:16:22,860 --> 02:16:24,660
If you already know how to make a website,
3111
02:16:24,660 --> 02:16:26,040
this part might not have phased you.
3112
02:16:26,040 --> 02:16:27,600
But if building a website is outside
3113
02:16:27,600 --> 02:16:29,700
of your learning journey
thus far, no sweat,
3114
02:16:29,700 --> 02:16:31,527
I've got it set up and
we're gonna take our time
3115
02:16:31,527 --> 02:16:34,500
and we're gonna focus on making
things work using this API.
3116
02:16:34,500 --> 02:16:36,450
All right, let's do this.
3117
02:16:36,450 --> 02:16:40,136
Okay, so I have a template
here in the notes.
3118
02:16:40,136 --> 02:16:45,136
In the unit three video one
we have this index.html,
3119
02:16:45,529 --> 02:16:48,690
which is our web application.
3120
02:16:48,690 --> 02:16:49,920
If you come in here you can scroll,
3121
02:16:49,920 --> 02:16:51,166
you can kind of see things here.
3122
02:16:51,166 --> 02:16:54,181
The app is called Pickle where
you get to pick your pics,
3123
02:16:54,181 --> 02:16:57,450
Peter picked a pickled pickle,
that sort of fun joke there.
3124
02:16:57,450 --> 02:16:59,670
And then we're gonna click
this Raw button right here.
3125
02:16:59,670 --> 02:17:01,370
We're gonna get a hold of this raw
3126
02:17:02,280 --> 02:17:05,260
and I am going to highlight everything
3127
02:17:06,150 --> 02:17:11,150
and use the magical
developer Command C copy.
3128
02:17:12,360 --> 02:17:14,467
And then I'm gonna come over to back
3129
02:17:14,467 --> 02:17:16,710
to my scratch on my visual studio code.
3130
02:17:16,710 --> 02:17:17,970
I'm gonna make a new file.
3131
02:17:17,970 --> 02:17:20,340
I'm gonna call that index.html,
3132
02:17:20,340 --> 02:17:22,260
hypertext markup language, right?
3133
02:17:22,260 --> 02:17:24,840
And I'm gonna paste that right here.
3134
02:17:24,840 --> 02:17:28,530
So now I have that code
locally on my machine.
3135
02:17:28,530 --> 02:17:31,710
If you are a get user, you
could definitely check this out
3136
02:17:31,710 --> 02:17:34,170
and have your own version
of this if you wanted to
3137
02:17:34,170 --> 02:17:36,120
but that's a good way to
get this here locally 'cause
3138
02:17:36,120 --> 02:17:39,600
we're just gonna explore around
here just for a little bit.
3139
02:17:39,600 --> 02:17:42,060
Let's take a look at
this file as it exists.
3140
02:17:42,060 --> 02:17:43,635
This is something that might happen to you
3141
02:17:43,635 --> 02:17:46,230
as a developer who knows now about APIs.
3142
02:17:46,230 --> 02:17:48,870
They might say, "Hey,
I've got this template
3143
02:17:48,870 --> 02:17:51,030
and I would love for you to be able
3144
02:17:51,030 --> 02:17:53,130
to set it up to make the API work."
3145
02:17:53,130 --> 02:17:57,510
So the first thing to do, if
you wanna look at an index file
3146
02:17:57,510 --> 02:17:59,610
locally on your computer, you
could set up a web server.
3147
02:17:59,610 --> 02:18:01,653
I've made it so we don't
need to have a web server
3148
02:18:01,653 --> 02:18:04,170
so we can just go ahead,
I'm gonna go to my terminal,
3149
02:18:04,170 --> 02:18:06,843
I'm gonna do a new terminal here.
3150
02:18:09,840 --> 02:18:14,550
I'm gonna open that up and I'm
just say open index dot html.
3151
02:18:14,550 --> 02:18:15,900
Now what that's going to do
3152
02:18:18,150 --> 02:18:21,360
in my Mac is going to
open this up for Windows,
3153
02:18:21,360 --> 02:18:23,220
take a look and see
how to do this exactly.
3154
02:18:23,220 --> 02:18:27,780
But this what this will do,
it will update my pickle here.
3155
02:18:27,780 --> 02:18:30,480
So, you can see this is user scratch
3156
02:18:30,480 --> 02:18:31,853
and then you know my, whatever it is,
3157
02:18:31,853 --> 02:18:34,890
it's in my directory there
and this is what's happening.
3158
02:18:34,890 --> 02:18:36,600
There's some nice kitty photos there.
3159
02:18:36,600 --> 02:18:38,670
I'll show you how that's
working and if you click
3160
02:18:38,670 --> 02:18:41,097
into one of them, you get
a nice little gallery here
3161
02:18:41,097 --> 02:18:43,140
and you can switch between
the different kitties
3162
02:18:43,140 --> 02:18:45,900
and you can see the text
that the user submitted.
3163
02:18:45,900 --> 02:18:47,160
That's kind of where
we're going with this.
3164
02:18:47,160 --> 02:18:49,645
That's what we're planning
on doing. Very nice setup.
3165
02:18:49,645 --> 02:18:54,645
Simple one little pager
application because I'm using
3166
02:18:55,440 --> 02:18:59,250
some APIs to be able to
do that here locally.
3167
02:18:59,250 --> 02:19:03,480
I'm using, remember APIs, not Web APIs,
3168
02:19:03,480 --> 02:19:06,570
but I'm using a View as the
framework that I'm using.
3169
02:19:06,570 --> 02:19:08,520
I'm using a framework called View
3170
02:19:08,520 --> 02:19:10,490
and it has an API and I'm also using this
3171
02:19:10,490 --> 02:19:13,650
Silent Box which is allowing
us to do that popup.
3172
02:19:13,650 --> 02:19:15,345
It also has an API.
3173
02:19:15,345 --> 02:19:17,610
Let's take a little bit of a look here.
3174
02:19:17,610 --> 02:19:20,197
So I'm gonna move a little
bit slow through this just so
3175
02:19:20,197 --> 02:19:23,670
in case it was your first time
seeing something like this.
3176
02:19:23,670 --> 02:19:26,130
I've got some setup here in this head tag.
3177
02:19:26,130 --> 02:19:28,080
You can see this html,
this is the head tag.
3178
02:19:28,080 --> 02:19:28,913
There's some setup.
3179
02:19:28,913 --> 02:19:32,850
So I'm using View and
I'm also using Silent Box
3180
02:19:32,850 --> 02:19:34,941
and I've got some very minimal styling.
3181
02:19:34,941 --> 02:19:37,233
It's not my forte.
3182
02:19:38,100 --> 02:19:40,940
And oftentimes you're
given a template like this.
3183
02:19:40,940 --> 02:19:43,080
So you're given, hey,
here's a working thing.
3184
02:19:43,080 --> 02:19:46,320
I would love for you to
get some APIs in there.
3185
02:19:46,320 --> 02:19:48,330
So the body of the app has this.
3186
02:19:48,330 --> 02:19:50,040
You'll see notice this little mustache,
3187
02:19:50,040 --> 02:19:51,820
mustache and it says call to action.
3188
02:19:51,820 --> 02:19:55,437
So in view this is part
of their API is if you
3189
02:19:55,437 --> 02:19:57,409
use this for a template,
it will be replaced
3190
02:19:57,409 --> 02:20:00,690
with something from the View Objects data.
3191
02:20:00,690 --> 02:20:02,580
So you can see here,
there's this call to action
3192
02:20:02,580 --> 02:20:04,827
and that's what this is and
this is why I can change this
3193
02:20:04,827 --> 02:20:07,290
and make this say whatever I
wanted to say it would be here.
3194
02:20:07,290 --> 02:20:09,870
So whatever we decide to do with our apps,
3195
02:20:09,870 --> 02:20:12,120
whatever kind of pics that
we're trying to collect,
3196
02:20:12,120 --> 02:20:14,125
that would be where we would change that.
3197
02:20:14,125 --> 02:20:15,570
And then you also see here,
3198
02:20:15,570 --> 02:20:18,329
there's this silent box
and it's doing a gallery.
3199
02:20:18,329 --> 02:20:22,560
And the way that that works is
we pass in this gallery from,
3200
02:20:22,560 --> 02:20:25,740
again, from this View Objects gallery.
3201
02:20:25,740 --> 02:20:28,230
You don't necessarily need
to worry too much about this,
3202
02:20:28,230 --> 02:20:30,480
but I wanted to show you that there is,
3203
02:20:30,480 --> 02:20:32,670
this is how View works,
it's a front end framework
3204
02:20:32,670 --> 02:20:36,540
and it provides an API where
if I give it a function
3205
02:20:36,540 --> 02:20:39,557
called data in whatever's in
here will get returned to it.
3206
02:20:39,557 --> 02:20:41,070
And then there's some more,
3207
02:20:41,070 --> 02:20:43,834
I can define some methods
on the view object.
3208
02:20:43,834 --> 02:20:46,110
One of those methods that I've defined
3209
02:20:46,110 --> 02:20:48,060
is called load images.
3210
02:20:48,060 --> 02:20:51,312
Part of the API that
View creates is there is
3211
02:20:51,312 --> 02:20:54,510
a lifecycle method called
mounted, which means
3212
02:20:54,510 --> 02:20:57,000
that when the application
is ready and it has
3213
02:20:57,000 --> 02:20:59,681
been mounted onto your HTML
through the JavaScript,
3214
02:20:59,681 --> 02:21:01,406
it will call this function.
3215
02:21:01,406 --> 02:21:03,930
So it's gonna call this
load images function.
3216
02:21:03,930 --> 02:21:06,690
In this load images
function, you'll notice it's
3217
02:21:06,690 --> 02:21:11,010
an async image and I've
got some to-dos in here.
3218
02:21:11,010 --> 02:21:12,750
This is someplace where you might
3219
02:21:12,750 --> 02:21:14,889
be communicating back
and forth with people
3220
02:21:14,889 --> 02:21:17,760
as you're working together on a project.
3221
02:21:17,760 --> 02:21:22,380
So use the messaging API to
use submitted photos and also
3222
02:21:22,380 --> 02:21:25,020
create a web-based API that
matches this expected response.
3223
02:21:25,020 --> 02:21:25,980
So that's what we're gonna do over
3224
02:21:25,980 --> 02:21:27,930
the next couple of videos here.
3225
02:21:27,930 --> 02:21:30,665
So what we see in the start
here is there's this gallery
3226
02:21:30,665 --> 02:21:35,067
and it is an array and it's
got some stuff from this.
3227
02:21:35,067 --> 02:21:37,710
There's a website called
Place Kitten that I used here.
3228
02:21:37,710 --> 02:21:40,153
So you can get different
versions of kitties here.
3229
02:21:40,153 --> 02:21:43,080
And there's a description
and there's an alt tag,
3230
02:21:43,080 --> 02:21:47,520
which is important because
for accessibility reasons,
3231
02:21:47,520 --> 02:21:49,380
this is what it will say on the picture.
3232
02:21:49,380 --> 02:21:54,380
So that is what is happening
to be able to make that work.
3233
02:21:56,820 --> 02:22:00,270
So we now have our app here locally
3234
02:22:00,270 --> 02:22:01,410
and we can change things.
3235
02:22:01,410 --> 02:22:06,150
So one of the things, one of
the photos that I want to do,
3236
02:22:06,150 --> 02:22:08,820
I love to get photos of
burritos from around town.
3237
02:22:08,820 --> 02:22:09,653
So I'm gonna change this.
3238
02:22:09,653 --> 02:22:11,124
I'm gonna say submit me a photo
3239
02:22:11,124 --> 02:22:14,310
of your burritos and I'm
gonna save that file.
3240
02:22:14,310 --> 02:22:16,200
So see it's not saved, I'm gonna save it.
3241
02:22:16,200 --> 02:22:18,090
When I go back to my file there,
3242
02:22:18,090 --> 02:22:21,300
when I refresh it, you can
see that it says "Burritos."
3243
02:22:21,300 --> 02:22:23,910
What are you going to want to gather?
3244
02:22:23,910 --> 02:22:27,120
Why don't you go ahead and change that,
3245
02:22:27,120 --> 02:22:28,770
change that to whatever
it is that you're wanting
3246
02:22:28,770 --> 02:22:30,480
to gather as we build
those projects through.
3247
02:22:30,480 --> 02:22:31,800
And of course you know you see
3248
02:22:31,800 --> 02:22:33,270
that you can change that however.
3249
02:22:33,270 --> 02:22:35,130
So make sure that it's
downloaded and make sure
3250
02:22:35,130 --> 02:22:36,803
that you can change that,
that you can change this file
3251
02:22:36,803 --> 02:22:40,950
and it opens locally on your machine.
3252
02:22:40,950 --> 02:22:42,357
Cool, and so now we have
3253
02:22:42,357 --> 02:22:44,940
a little smattering of APIs here already.
3254
02:22:44,940 --> 02:22:48,030
So we have a web, we
have HTML working here.
3255
02:22:48,030 --> 02:22:50,250
We have this view and this view API has
3256
02:22:50,250 --> 02:22:53,610
a very specific API that's
doing this mounted here.
3257
02:22:53,610 --> 02:22:55,860
But remember it is actually
an API and we're going
3258
02:22:55,860 --> 02:23:00,148
to use a web-based API to be
able to get this information
3259
02:23:00,148 --> 02:23:03,000
and we're gonna do that
here in just a bit.
3260
02:23:03,000 --> 02:23:05,850
Now that we got our file all
working, let's deploy it.
3261
02:23:05,850 --> 02:23:07,380
And by that I mean let's get it up on
3262
02:23:07,380 --> 02:23:09,690
the public internet so
everyone can see it.
3263
02:23:09,690 --> 02:23:12,067
That is of course after
you take a quick break.
3264
02:23:12,067 --> 02:23:14,734
(upbeat music)
3265
02:23:27,405 --> 02:23:29,040
We are gonna get our webpage up
3266
02:23:29,040 --> 02:23:30,780
on the internet so others can see it.
3267
02:23:30,780 --> 02:23:33,780
And this has gotten much
easier as time has progressed.
3268
02:23:33,780 --> 02:23:35,160
You used to have to set up a server,
3269
02:23:35,160 --> 02:23:37,770
like a physical computer,
buy a domain name
3270
02:23:37,770 --> 02:23:39,660
and configure it to point to your machine.
3271
02:23:39,660 --> 02:23:41,664
You had to figure out
where to host, like where
3272
02:23:41,664 --> 02:23:43,853
to locate your server so
that it was always on.
3273
02:23:43,853 --> 02:23:47,279
And arguably the hardest part
after it was live, you used
3274
02:23:47,279 --> 02:23:50,130
to have to watch over it in
case too many people came to it.
3275
02:23:50,130 --> 02:23:51,960
You didn't want it to get overloaded,
3276
02:23:51,960 --> 02:23:55,080
you wanted it to scale up and
be able to handle the traffic.
3277
02:23:55,080 --> 02:23:57,948
Those servers are still
around but these days
3278
02:23:57,948 --> 02:24:00,630
you don't really need to
worry about them too much.
3279
02:24:00,630 --> 02:24:01,620
Now I'm sure that you've heard
3280
02:24:01,620 --> 02:24:04,200
the term the cloud and the colloquium.
3281
02:24:04,200 --> 02:24:05,970
The cloud is just other
people's computers.
3282
02:24:05,970 --> 02:24:08,100
Well let's talk a bit about serverless.
3283
02:24:08,100 --> 02:24:10,950
Serverless is just other people's servers.
3284
02:24:10,950 --> 02:24:12,900
It removes all those
previous things that we had
3285
02:24:12,900 --> 02:24:15,810
to worry about and it
offloads your concerns.
3286
02:24:15,810 --> 02:24:17,070
I can tell by the look on your face
3287
02:24:17,070 --> 02:24:18,891
that it's probably better
if I just show you,
3288
02:24:18,891 --> 02:24:21,390
let's get this application hosted.
3289
02:24:21,390 --> 02:24:24,150
So we're gonna have Twilio
host our code for us
3290
02:24:24,150 --> 02:24:27,000
and that is to say we are
going to have Twilio be
3291
02:24:27,000 --> 02:24:30,624
our web server that will
be used to serve our HTML.
3292
02:24:30,624 --> 02:24:33,840
Our project will be serverless.
3293
02:24:33,840 --> 02:24:36,600
Now the way you do that is
by using Twilio's serverless
3294
02:24:36,600 --> 02:24:40,320
environment, which is here
under functions and assets.
3295
02:24:40,320 --> 02:24:42,630
Now if you don't have
that here, if you click
3296
02:24:42,630 --> 02:24:45,886
Explore Products and you
come to Developer Tools
3297
02:24:45,886 --> 02:24:48,090
and you come over to Functions and Assets,
3298
02:24:48,090 --> 02:24:49,950
you can click this little pin icon
3299
02:24:49,950 --> 02:24:52,590
and that will make it show up here.
3300
02:24:52,590 --> 02:24:56,070
So I am going to create a new service.
3301
02:24:56,070 --> 02:24:59,070
So I'm gonna go Functions
and Assets, Services,
3302
02:24:59,070 --> 02:25:00,750
and I'm gonna say Create Service.
3303
02:25:00,750 --> 02:25:02,550
It could be whatever you want.
3304
02:25:02,550 --> 02:25:03,870
I'm gonna call it pickle,
3305
02:25:03,870 --> 02:25:08,220
like pick your pics with Pickle Peter.
3306
02:25:08,220 --> 02:25:10,170
Services allow us to group our functions
3307
02:25:10,170 --> 02:25:12,549
and assets together for our application.
3308
02:25:12,549 --> 02:25:14,970
So I'm gonna click Next
and what's gonna happen
3309
02:25:14,970 --> 02:25:17,610
is we're gonna open up to a very nice IDE
3310
02:25:17,610 --> 02:25:19,200
that'll allow us to edit our code.
3311
02:25:19,200 --> 02:25:22,530
Now a friendly reminder, if
you're having a hard time
3312
02:25:22,530 --> 02:25:24,690
following along because
my screen looks different
3313
02:25:24,690 --> 02:25:29,280
than yours, you are using a
new and improved experience.
3314
02:25:29,280 --> 02:25:32,212
So check the notes for
what might be different.
3315
02:25:32,212 --> 02:25:34,091
Now traditionally these services here
3316
02:25:34,091 --> 02:25:37,672
are used to power Twilio
based applications.
3317
02:25:37,672 --> 02:25:39,810
Remember how I said you could respond
3318
02:25:39,810 --> 02:25:41,706
programmatically to an incoming message?
3319
02:25:41,706 --> 02:25:45,000
Well, functions are a
great way to do just that.
3320
02:25:45,000 --> 02:25:48,337
In fact, our current number
has a default response
3321
02:25:48,337 --> 02:25:51,046
and we might as well fix it
while we're here, but before
3322
02:25:51,046 --> 02:25:54,300
we do that, let's get our
HTML code up and running.
3323
02:25:54,300 --> 02:25:56,550
So what I'm going to do
is I'm gonna grab code
3324
02:25:56,550 --> 02:25:59,040
from my local machine and if you want to,
3325
02:25:59,040 --> 02:26:00,930
you can just grab it from GitHub,
3326
02:26:00,930 --> 02:26:02,313
check the notes for more on that.
3327
02:26:02,313 --> 02:26:04,230
But I'm gonna go add, I'm gonna choose
3328
02:26:04,230 --> 02:26:06,630
Upload File, I'm gonna find my file,
3329
02:26:06,630 --> 02:26:09,540
my index html and I'm gonna choose Open.
3330
02:26:09,540 --> 02:26:10,770
Now what we're uploading,
3331
02:26:10,770 --> 02:26:12,900
we'd like the world to be able to see it.
3332
02:26:12,900 --> 02:26:14,460
So, I'm gonna choose Public
3333
02:26:14,460 --> 02:26:16,353
and then I'm gonna choose Upload.
3334
02:26:18,690 --> 02:26:20,460
So now this files over here,
3335
02:26:20,460 --> 02:26:22,260
you'll notice this little green dot.
3336
02:26:22,260 --> 02:26:25,140
And this means that it is not yet deployed
3337
02:26:25,140 --> 02:26:27,051
and that is, it's not yet available
3338
02:26:27,051 --> 02:26:29,948
on the internet in this current state.
3339
02:26:29,948 --> 02:26:31,200
So let's do that.
3340
02:26:31,200 --> 02:26:32,040
I'm gonna do that by clicking
3341
02:26:32,040 --> 02:26:34,503
this Deploy All button down here.
3342
02:26:40,475 --> 02:26:43,170
And now we see that
it's green and I'm gonna
3343
02:26:43,170 --> 02:26:45,885
go ahead and choose copy URL and I'm gonna
3344
02:26:45,885 --> 02:26:48,690
open up a new tab with that there.
3345
02:26:48,690 --> 02:26:52,217
And we will see that our site is live,
3346
02:26:52,217 --> 02:26:54,720
except it says burritos
and these are kittens,
3347
02:26:54,720 --> 02:26:55,740
but we're getting there.
3348
02:26:55,740 --> 02:26:58,740
So it's working, it's
up, it's on the internet.
3349
02:26:58,740 --> 02:27:01,260
I could share this with people.
3350
02:27:01,260 --> 02:27:05,010
The pickle site is up and
running on Twilio's servers.
3351
02:27:05,010 --> 02:27:06,030
One of the things that I used
3352
02:27:06,030 --> 02:27:07,710
to have to worry about was scale.
3353
02:27:07,710 --> 02:27:09,570
Like what if I got a
whole bunch of requests
3354
02:27:09,570 --> 02:27:11,820
to this site, would it fall over?
3355
02:27:11,820 --> 02:27:14,160
What the serverless solution
is doing is allowing me
3356
02:27:14,160 --> 02:27:16,560
to not need to worry
about any of that anymore.
3357
02:27:16,560 --> 02:27:19,080
Twilio is handling all those
concerns for me, which is great
3358
02:27:19,080 --> 02:27:21,748
'cause now I can focus
on what I was building.
3359
02:27:21,748 --> 02:27:24,120
Which by the way, we need to handle
3360
02:27:24,120 --> 02:27:26,760
that reply programmatically, right?
3361
02:27:26,760 --> 02:27:29,550
So the way that Twilio does
things is with web hooks.
3362
02:27:29,550 --> 02:27:31,380
Now if you haven't
encountered web hooks before,
3363
02:27:31,380 --> 02:27:35,010
I have an entire course on them
that I link to in the notes.
3364
02:27:35,010 --> 02:27:38,190
Web hooks are sometimes
called a reverse API.
3365
02:27:38,190 --> 02:27:42,750
That is, instead of you calling
the API, the API calls you.
3366
02:27:42,750 --> 02:27:44,929
So let's configure our number
3367
02:27:44,929 --> 02:27:47,760
to make use of the right web hook.
3368
02:27:47,760 --> 02:27:51,570
So I'm gonna go back
to my number over here.
3369
02:27:51,570 --> 02:27:54,750
If I look under phone
numbers and I do manage,
3370
02:27:54,750 --> 02:27:57,630
I'm gonna hold down command or control
3371
02:27:57,630 --> 02:27:59,820
and click Active Numbers,
I'll open up a new tab.
3372
02:27:59,820 --> 02:28:02,576
Nice little hack to keep
your screen open here.
3373
02:28:02,576 --> 02:28:05,220
So I've got my numbers
here and if I come in here
3374
02:28:05,220 --> 02:28:09,403
to configure it, what happens
is I'm gonna scroll down.
3375
02:28:12,180 --> 02:28:14,010
So here's the voice
section and then here's
3376
02:28:14,010 --> 02:28:17,070
the messaging section and
it says, when a message
3377
02:28:17,070 --> 02:28:19,992
comes in to this web hook and it sends to
3378
02:28:19,992 --> 02:28:24,992
this URL here, it does
a post to this URL here.
3379
02:28:26,340 --> 02:28:28,457
So the way that Twilio makes use
3380
02:28:28,457 --> 02:28:30,960
of web hooks can be thought of like this.
3381
02:28:30,960 --> 02:28:32,730
You know when I hit this URL, right?
3382
02:28:32,730 --> 02:28:37,105
This URL in my browser,
my browser doesn't care
3383
02:28:37,105 --> 02:28:39,420
about what's happening at that endpoint.
3384
02:28:39,420 --> 02:28:41,610
It could have been
anything, any web server
3385
02:28:41,610 --> 02:28:45,120
like Express, Jingo, a Java
server, it doesn't matter.
3386
02:28:45,120 --> 02:28:47,437
What matters is that
what was returned from
3387
02:28:47,437 --> 02:28:52,437
my server was HTML or
hypertext market language.
3388
02:28:52,890 --> 02:28:54,630
My server responses with HTML
3389
02:28:54,630 --> 02:28:56,610
and my browser renders the page.
3390
02:28:56,610 --> 02:28:58,530
Now the same is true with Twilio.
3391
02:28:58,530 --> 02:29:00,570
Someone is going to text our Twilio number
3392
02:29:00,570 --> 02:29:04,680
and Twilio is going to send
a request to an endpoint.
3393
02:29:04,680 --> 02:29:07,687
In this case, this endpoint
here, it doesn't matter what
3394
02:29:07,687 --> 02:29:12,630
is happening on the other side
as long as it returns TwiML,
3395
02:29:12,630 --> 02:29:16,020
or Twilio markup language,
they look very similar.
3396
02:29:16,020 --> 02:29:18,140
HTML and TwiML.
3397
02:29:18,140 --> 02:29:21,840
Twilio will be able to
render your application.
3398
02:29:21,840 --> 02:29:24,836
So we could set up a new web
server to host this application
3399
02:29:24,836 --> 02:29:29,836
that returns TwiML or we could
just use a Twilio function.
3400
02:29:29,940 --> 02:29:30,900
And like I said earlier,
3401
02:29:30,900 --> 02:29:32,550
that is what these are commonly used for.
3402
02:29:32,550 --> 02:29:34,413
So let's pop back to our service.
3403
02:29:35,490 --> 02:29:38,404
So I'm gonna come here, I'm
gonna add a new function
3404
02:29:38,404 --> 02:29:42,917
and I'm gonna name this
function Incoming Message
3405
02:29:42,917 --> 02:29:44,280
'cause that's what we're gonna do.
3406
02:29:44,280 --> 02:29:46,360
We're gonna handle an incoming message
3407
02:29:48,990 --> 02:29:52,530
and there is some very
nice default boiler plate
3408
02:29:52,530 --> 02:29:54,943
that is commented that comes through.
3409
02:29:54,943 --> 02:29:57,840
So boiler plate is code that's provided.
3410
02:29:57,840 --> 02:29:59,850
That's usually the most
common thing that you're going
3411
02:29:59,850 --> 02:30:02,850
to be doing and in this case
it is, it's boiler plate
3412
02:30:02,850 --> 02:30:05,910
for how to respond to
an incoming phone call.
3413
02:30:05,910 --> 02:30:09,120
It's kind of like the hello
world of voice applications,
3414
02:30:09,120 --> 02:30:11,880
but we are gonna be building
a messaging application.
3415
02:30:11,880 --> 02:30:13,920
So we'll need to tweak this just a bit.
3416
02:30:13,920 --> 02:30:15,420
Now I've put this code,
3417
02:30:15,420 --> 02:30:17,040
I'm about to show you into the notes.
3418
02:30:17,040 --> 02:30:18,660
So I don't want you to
feel like you have to type
3419
02:30:18,660 --> 02:30:21,750
this all out or even fully
understand every line.
3420
02:30:21,750 --> 02:30:24,120
I'll step you through it, first though,
3421
02:30:24,120 --> 02:30:26,340
let me walk you through
this function just a bit.
3422
02:30:26,340 --> 02:30:31,340
So Twilio functions all export
a thing called a handler.
3423
02:30:31,410 --> 02:30:34,063
And that handler takes
a function that takes
3424
02:30:34,063 --> 02:30:37,893
some parameters, context,
events, and callback.
3425
02:30:39,090 --> 02:30:41,845
Context here is an object
that holds information about
3426
02:30:41,845 --> 02:30:44,490
the function that's running,
like it knows the domain,
3427
02:30:44,490 --> 02:30:47,340
it knows the name of the
function and the event here,
3428
02:30:47,340 --> 02:30:49,908
you can kind of think of
this like a web request in
3429
02:30:49,908 --> 02:30:52,770
most frameworks and if you
haven't seen a framework before,
3430
02:30:52,770 --> 02:30:54,930
this is kind of the way that information
3431
02:30:54,930 --> 02:30:57,248
is passed into your web application.
3432
02:30:57,248 --> 02:31:00,930
So, this is the event will hold everything
3433
02:31:00,930 --> 02:31:02,820
about the text message that was incoming
3434
02:31:02,820 --> 02:31:04,170
because that's what Twilio does.
3435
02:31:04,170 --> 02:31:07,350
Twilio's going to pass that
information through here.
3436
02:31:07,350 --> 02:31:08,730
And for instance, that message will
3437
02:31:08,730 --> 02:31:11,910
have the to, it'll have from and body.
3438
02:31:11,910 --> 02:31:14,700
And again, because when
the text message comes in,
3439
02:31:14,700 --> 02:31:17,457
we are going to point our
phone number to this function.
3440
02:31:17,457 --> 02:31:19,740
So Twilio will post the information here,
3441
02:31:19,740 --> 02:31:22,590
it will call our function
instead of us writing code
3442
02:31:22,590 --> 02:31:25,200
that checks if a new message
was added over and over again.
3443
02:31:25,200 --> 02:31:26,940
Twilio is gonna call us.
3444
02:31:26,940 --> 02:31:30,390
The API is going to
call us via a web hook.
3445
02:31:30,390 --> 02:31:33,300
Web hooks are pretty
cool. Check the notes.
3446
02:31:33,300 --> 02:31:36,660
And then finally, there's
this callback object here,
3447
02:31:36,660 --> 02:31:40,110
which is how we send
information out of the function.
3448
02:31:40,110 --> 02:31:42,239
It's actually a function,
so we have this callback,
3449
02:31:42,239 --> 02:31:44,250
this is the errors that
might have happened,
3450
02:31:44,250 --> 02:31:46,290
and then this is what gets returned.
3451
02:31:46,290 --> 02:31:49,830
And here's that TwiML,
Twilio markup language.
3452
02:31:49,830 --> 02:31:52,200
So I'm gonna get rid of a
couple of these lines here.
3453
02:31:52,200 --> 02:31:53,640
These are sort of demo lines, I'm gonna
3454
02:31:53,640 --> 02:31:55,781
get rid of that and I want you to be able
3455
02:31:55,781 --> 02:31:57,960
to see what's coming into the message.
3456
02:31:57,960 --> 02:32:01,470
So I'm gonna start up here.
I'm gonna do a console dot log.
3457
02:32:01,470 --> 02:32:03,981
And what what this does
is when the function runs,
3458
02:32:03,981 --> 02:32:06,660
if we want to, we can see the message,
3459
02:32:06,660 --> 02:32:07,740
it will show up down here.
3460
02:32:07,740 --> 02:32:10,690
So let's say that we
got an incoming message
3461
02:32:12,030 --> 02:32:16,980
and it was incoming
message and we'll just do
3462
02:32:16,980 --> 02:32:19,560
a colon and then I'm
gonna use this dollar,
3463
02:32:19,560 --> 02:32:21,780
this style of string interpolation.
3464
02:32:21,780 --> 02:32:23,730
So I have the event object, and on it
3465
02:32:23,730 --> 02:32:27,043
there is a property called
body with a capital B.
3466
02:32:27,043 --> 02:32:29,010
So that's being passed in there.
3467
02:32:29,010 --> 02:32:31,107
So when the function runs, we will see
3468
02:32:31,107 --> 02:32:32,850
that the message came in 'cause Twilio's
3469
02:32:32,850 --> 02:32:35,070
gonna pass that message
and we'll see it there.
3470
02:32:35,070 --> 02:32:37,890
And we're just gonna say thanks
when somebody sends this in.
3471
02:32:37,890 --> 02:32:40,350
So we don't really need to do
anything with this message,
3472
02:32:40,350 --> 02:32:42,870
but you might wanna
filter it or handle things
3473
02:32:42,870 --> 02:32:44,520
differently based on what they said in
3474
02:32:44,520 --> 02:32:46,890
the message and you totally could do that.
3475
02:32:46,890 --> 02:32:49,607
But you probably also wanna
check the photo that came in
3476
02:32:49,607 --> 02:32:53,760
was actually a burrito or
something, not inaprops.
3477
02:32:53,760 --> 02:32:55,830
You could do that and
there are APIs for that,
3478
02:32:55,830 --> 02:32:58,050
but that's a little out of scope.
3479
02:32:58,050 --> 02:32:59,970
So instead of a voice response,
3480
02:32:59,970 --> 02:33:02,808
we're actually going to
return a messaging response.
3481
02:33:02,808 --> 02:33:04,920
And there's a little
helper library here, right?
3482
02:33:04,920 --> 02:33:07,260
So a little helper library for TwiML
3483
02:33:07,260 --> 02:33:09,063
and it has this TwiML object.
3484
02:33:10,290 --> 02:33:13,590
And before it was doing say,
which is text to speech.
3485
02:33:13,590 --> 02:33:15,120
So if you wired this up,
3486
02:33:15,120 --> 02:33:18,117
it would say hello world
in like a computery,
3487
02:33:18,117 --> 02:33:20,130
but actually pretty good
sounding voice these days.
3488
02:33:20,130 --> 02:33:21,750
But I'm gonna change this to be a message
3489
02:33:21,750 --> 02:33:22,920
'cause that's what we wanna return.
3490
02:33:22,920 --> 02:33:25,620
We wanna return a
message and we wanna say,
3491
02:33:25,620 --> 02:33:30,620
thanks for your submission, right?
3492
02:33:32,010 --> 02:33:33,570
We wanna thank them there.
3493
02:33:33,570 --> 02:33:35,580
And we can also send
any sort of emoji here.
3494
02:33:35,580 --> 02:33:38,400
Let's see if maybe a camera
that sounds, yeah, it's nice.
3495
02:33:38,400 --> 02:33:39,540
Thanks for your submission.
3496
02:33:39,540 --> 02:33:42,390
And so what's happening
here is this object,
3497
02:33:42,390 --> 02:33:43,416
it's a fluid API.
3498
02:33:43,416 --> 02:33:46,410
It means that it doesn't return anything.
3499
02:33:46,410 --> 02:33:50,100
You kind of tweak it and it
builds as things go on it.
3500
02:33:50,100 --> 02:33:51,840
So you'll notice that this
isn't returning anything.
3501
02:33:51,840 --> 02:33:54,810
I'm modifying this object
and then when I send it
3502
02:33:54,810 --> 02:33:56,820
out at the end, that's how it goes out.
3503
02:33:56,820 --> 02:33:57,990
So let me, let's just,
3504
02:33:57,990 --> 02:33:59,610
let me show you what
that object looks like.
3505
02:33:59,610 --> 02:34:03,070
So again, I'll do one of these console log
3506
02:34:03,070 --> 02:34:04,940
and use the back tick and we'll say TwiML.
3507
02:34:04,940 --> 02:34:09,750
So Twilio markup language was TwiML.
3508
02:34:09,750 --> 02:34:11,878
And you'll see that it
looks a lot like html.
3509
02:34:11,878 --> 02:34:13,620
There are some rules to it,
3510
02:34:13,620 --> 02:34:16,410
but we don't need to
learn them all right now.
3511
02:34:16,410 --> 02:34:19,920
So I'm gonna save this
and just like before,
3512
02:34:19,920 --> 02:34:22,500
you'll notice that this is
gray, it hasn't been deployed.
3513
02:34:22,500 --> 02:34:24,437
So I'm gonna click Deploy All and while
3514
02:34:24,437 --> 02:34:26,400
that's building, I'm gonna head back to
3515
02:34:26,400 --> 02:34:28,743
my phone number page and
I'm gonna refresh it.
3516
02:34:29,910 --> 02:34:32,323
So on my phone number
page, I need to change
3517
02:34:32,323 --> 02:34:37,050
my message down here it says,
when a message comes in,
3518
02:34:37,050 --> 02:34:41,040
we want it to be a function
that is in the pickle service.
3519
02:34:41,040 --> 02:34:42,690
That's done in the UI.
3520
02:34:42,690 --> 02:34:44,970
And we want to choose incoming message,
3521
02:34:44,970 --> 02:34:46,973
which it hasn't finished deploying yet.
3522
02:34:46,973 --> 02:34:49,697
Just finish deploying, one more time.
3523
02:34:49,697 --> 02:34:52,593
Let me refresh that page.
So that shows up for us.
3524
02:34:54,360 --> 02:34:57,139
We're going to go to,
when a message comes in,
3525
02:34:57,139 --> 02:35:00,164
it's going to be a function
and it's on the pickle service
3526
02:35:00,164 --> 02:35:03,930
for this UI and we wanna
do incoming message.
3527
02:35:03,930 --> 02:35:08,930
And if we do save, alright,
so we should be all wired up.
3528
02:35:09,690 --> 02:35:11,850
I'm gonna click Clear Logs here,
3529
02:35:11,850 --> 02:35:14,610
and I'm gonna turn live logs on.
3530
02:35:14,610 --> 02:35:16,737
You can see that this says
live logs on when it's ready.
3531
02:35:16,737 --> 02:35:18,837
And I'm gonna clear
the logs one more time.
3532
02:35:18,837 --> 02:35:22,735
And what I'm gonna do now is
I'm going to send a message in
3533
02:35:22,735 --> 02:35:24,366
and we should see this, we should see
3534
02:35:24,366 --> 02:35:27,148
what I send in and we should see the TwiML
3535
02:35:27,148 --> 02:35:29,820
that was sent back and I
should get a response back.
3536
02:35:29,820 --> 02:35:34,140
So let me send that message
here. Let me send this text.
3537
02:35:34,140 --> 02:35:36,227
All right. So, oh, check out this.
3538
02:35:36,227 --> 02:35:39,030
I have this beautiful
picture of a burrito.
3539
02:35:39,030 --> 02:35:41,160
I love when burritos can
stand up by themselves.
3540
02:35:41,160 --> 02:35:43,680
And this is an awesome one.
I'm gonna send this in.
3541
02:35:43,680 --> 02:35:47,457
So check out this beautiful
burrito, little emoji.
3542
02:35:47,457 --> 02:35:50,430
I'm gonna send that through
and we should see here in
3543
02:35:50,430 --> 02:35:52,560
the live logs, we should see
the message come through.
3544
02:35:52,560 --> 02:35:55,200
There we go, so look at
this beautiful burrito,
3545
02:35:55,200 --> 02:35:57,750
and this is the TwiML that was generated.
3546
02:35:57,750 --> 02:35:59,280
So you can see it's like tag-based.
3547
02:35:59,280 --> 02:36:01,290
So there's a response and
there's a closing response
3548
02:36:01,290 --> 02:36:03,167
and there's an opening
message and a closing message.
3549
02:36:03,167 --> 02:36:05,220
Thanks for your submission.
3550
02:36:05,220 --> 02:36:07,007
I don't want you to feel
like you need to learn TwiML.
3551
02:36:07,007 --> 02:36:11,310
You could do that later if
you need to, but this works.
3552
02:36:11,310 --> 02:36:12,703
So I got my message back.
3553
02:36:12,703 --> 02:36:15,150
Now, remember, since we are in trial mode,
3554
02:36:15,150 --> 02:36:17,070
if somebody else sends in a message
3555
02:36:17,070 --> 02:36:19,470
to your phone number,
they're only gonna get
3556
02:36:19,470 --> 02:36:22,020
a message back if they're
a verified sender.
3557
02:36:22,020 --> 02:36:24,900
So that is a limit of the trial API
3558
02:36:24,900 --> 02:36:25,830
that we're using currently.
3559
02:36:25,830 --> 02:36:27,570
Now most APIs have limits.
3560
02:36:27,570 --> 02:36:30,180
There's only so many calls you can make.
3561
02:36:30,180 --> 02:36:32,820
There's, you can only
send to verified numbers.
3562
02:36:32,820 --> 02:36:34,241
There's just different sort of limits.
3563
02:36:34,241 --> 02:36:36,450
And that's what we're
working with here right now.
3564
02:36:36,450 --> 02:36:39,134
The limit is that you can
only send to verified numbers.
3565
02:36:39,134 --> 02:36:41,407
They can still submit,
they just won't get this
3566
02:36:41,407 --> 02:36:42,390
"Thanks for your submission."
3567
02:36:42,390 --> 02:36:44,370
So your phone number should,
so when you submit from
3568
02:36:44,370 --> 02:36:46,671
your phone number, you should
get it just like I did.
3569
02:36:46,671 --> 02:36:48,450
All right, so we're looking good.
3570
02:36:48,450 --> 02:36:50,940
We have our site hosted and we are
3571
02:36:50,940 --> 02:36:53,869
handling submissions by thanking them.
3572
02:36:53,869 --> 02:36:55,620
Let's get to some more cooking.
3573
02:36:55,620 --> 02:36:57,360
Now, if you're interested in learning more
3574
02:36:57,360 --> 02:36:59,730
about applications like
this over the phone,
3575
02:36:59,730 --> 02:37:01,980
check out the notes for more resources.
3576
02:37:01,980 --> 02:37:03,480
I have an entire course on this
3577
02:37:03,480 --> 02:37:04,410
if this piqued your interest.
3578
02:37:04,410 --> 02:37:07,770
But for now, let's get back to our API.
3579
02:37:07,770 --> 02:37:10,290
Now, with our ability to
host our own application,
3580
02:37:10,290 --> 02:37:12,987
we can focus on designing our own API.
3581
02:37:12,987 --> 02:37:15,510
Now the great news is that
Twilio functions makes it
3582
02:37:15,510 --> 02:37:18,030
really straightforward
to return JSON, remember,
3583
02:37:18,030 --> 02:37:19,980
that's JavaScript object notation,
3584
02:37:19,980 --> 02:37:21,693
the lingua franca of the web.
3585
02:37:22,560 --> 02:37:24,930
Let's design our web-based API to return
3586
02:37:24,930 --> 02:37:27,930
the expected format, and we can
make use of Twilio's message
3587
02:37:27,930 --> 02:37:31,650
API to get a hold of all the
messages that we received.
3588
02:37:31,650 --> 02:37:35,760
Do you see what I did there? Get, get it?
3589
02:37:35,760 --> 02:37:38,151
All right. I'm a get outta here.
3590
02:37:38,151 --> 02:37:41,190
I can't stop. All right, let's do this.
3591
02:37:41,190 --> 02:37:44,360
Okay, so we are gonna
actually write an API
3592
02:37:44,360 --> 02:37:48,780
and we already have a spec
or a specification, right?
3593
02:37:48,780 --> 02:37:51,300
We need to provide for
this specific plugin,
3594
02:37:51,300 --> 02:37:53,850
This silent box has this gallery plugin
3595
02:37:53,850 --> 02:37:56,455
and it has a specific API that it defines
3596
02:37:56,455 --> 02:37:59,631
and that API looks like this, right?
3597
02:37:59,631 --> 02:38:01,777
So remember that we're
setting this gallery and we're
3598
02:38:01,777 --> 02:38:04,620
setting an array and we're
setting this information here.
3599
02:38:04,620 --> 02:38:07,650
So I think we should start
by creating an endpoint
3600
02:38:07,650 --> 02:38:10,350
that returns exactly what we have here.
3601
02:38:10,350 --> 02:38:11,880
We should return an
endpoint that does this,
3602
02:38:11,880 --> 02:38:15,240
the returns this, and then
we'll move forward from there.
3603
02:38:15,240 --> 02:38:18,399
This is what I do when I find
myself in a situation when
3604
02:38:18,399 --> 02:38:21,977
I'm working on a project
with a team of people, I take
3605
02:38:21,977 --> 02:38:26,130
what they expect in a template
and I return it from an API.
3606
02:38:26,130 --> 02:38:29,400
This way they can keep working
and I can keep working too.
3607
02:38:29,400 --> 02:38:31,920
So let's do that. I'm gonna
create a new function.
3608
02:38:31,920 --> 02:38:33,807
So I'm gonna choose add, add function,
3609
02:38:33,807 --> 02:38:37,500
and I can name this whatever I want.
3610
02:38:37,500 --> 02:38:39,630
And I suppose we should be clear, right?
3611
02:38:39,630 --> 02:38:41,446
We're gonna make an API,
we're actually gonna
3612
02:38:41,446 --> 02:38:45,270
make one so slash API and then I suppose
3613
02:38:45,270 --> 02:38:46,650
we should probably say what it's gonna be.
3614
02:38:46,650 --> 02:38:48,663
So we'll do a Pics API here, right?
3615
02:38:50,610 --> 02:38:52,230
And I'm going to press Enter
3616
02:38:52,230 --> 02:38:55,387
and that will get me my boiler plate code,
3617
02:38:55,387 --> 02:38:59,760
of which I am going to
get rid of everything.
3618
02:38:59,760 --> 02:39:01,350
So thank you for the help.
3619
02:39:01,350 --> 02:39:02,740
We're not actually
returning TwiML this time.
3620
02:39:02,740 --> 02:39:05,910
We're actually gonna return an object.
3621
02:39:05,910 --> 02:39:10,290
And what I'll do is I'll copy the
3622
02:39:10,290 --> 02:39:14,520
hard coded array from
this index file here.
3623
02:39:14,520 --> 02:39:17,160
I'll come in here and
I'll copy this hard coded.
3624
02:39:17,160 --> 02:39:20,280
Now hard coded means it is just like
3625
02:39:20,280 --> 02:39:21,450
in the code this way, right?
3626
02:39:21,450 --> 02:39:23,550
There's no way that this
is going to be dynamic.
3627
02:39:23,550 --> 02:39:27,090
I'm gonna change that here.
I'm gonna paste that in here.
3628
02:39:27,090 --> 02:39:28,110
I'm gonna name it the same thing.
3629
02:39:28,110 --> 02:39:30,560
So I'm gonna create a new
variable called gallery
3630
02:39:31,860 --> 02:39:35,160
and I am going to just paste
that hard coded code there.
3631
02:39:35,160 --> 02:39:40,023
There we go. And then I'm
gonna call this gallery.
3632
02:39:43,680 --> 02:39:45,150
So again, I have an array.
3633
02:39:45,150 --> 02:39:47,040
That's what this bracket here is an array
3634
02:39:47,040 --> 02:39:48,870
of these objects, that's
what these objects are.
3635
02:39:48,870 --> 02:39:52,260
These mustaches, they
open up and the objects
3636
02:39:52,260 --> 02:39:55,308
have these properties here and these are
3637
02:39:55,308 --> 02:40:00,308
representing the pics
that that plugin requires.
3638
02:40:00,573 --> 02:40:03,180
And now I'm gonna use
this callback function
3639
02:40:03,180 --> 02:40:05,548
to return that gallery array.
3640
02:40:05,548 --> 02:40:08,130
One really nice thing
about this Twilio function
3641
02:40:08,130 --> 02:40:11,190
is that if I pass it an object like I did,
3642
02:40:11,190 --> 02:40:14,091
it'll automatically return JSON to anybody
3643
02:40:14,091 --> 02:40:16,770
who requests the URL, so let's do that.
3644
02:40:16,770 --> 02:40:17,603
So I'm gonna go ahead,
3645
02:40:17,603 --> 02:40:19,743
I'm gonna save this and
I'm gonna deploy it.
3646
02:40:22,860 --> 02:40:27,420
Now one thing to note, by default
it was actually protected.
3647
02:40:27,420 --> 02:40:29,940
That's what this little
key lock thing means here.
3648
02:40:29,940 --> 02:40:32,130
So I'm gonna click this
and I'm gonna change this
3649
02:40:32,130 --> 02:40:34,530
to be public 'cause we
actually want anybody
3650
02:40:34,530 --> 02:40:37,050
to be able to see it, not just Twilio.
3651
02:40:37,050 --> 02:40:38,430
So this is what we're gonna do.
3652
02:40:38,430 --> 02:40:41,010
I'm gonna change this to be
public and then I'm going
3653
02:40:41,010 --> 02:40:43,767
to choose a deploy all and
you'll see that it's gray
3654
02:40:43,767 --> 02:40:47,461
and when it's ready it
will turn green for us.
3655
02:40:47,461 --> 02:40:50,970
And so I'm gonna go ahead
and I'm gonna copy this URL.
3656
02:40:50,970 --> 02:40:53,580
So I have this URL already
and when it's green,
3657
02:40:53,580 --> 02:40:57,120
when this goes to be deployed,
so it's still deploying,
3658
02:40:57,120 --> 02:40:59,550
you can see it's deploying
and you'll know down here
3659
02:40:59,550 --> 02:41:02,040
when it'll say build completed
and it'll say deployed.
3660
02:41:02,040 --> 02:41:04,740
So it's deployed, so I
copied that URL, I am gonna
3661
02:41:04,740 --> 02:41:07,740
go hit that URL and let's
see what we get back.
3662
02:41:07,740 --> 02:41:08,730
Awesome, we got it.
3663
02:41:08,730 --> 02:41:10,470
So we got the kitty descriptions
3664
02:41:10,470 --> 02:41:12,125
and blow this up a little bit here.
3665
02:41:12,125 --> 02:41:14,513
This is JSON, it automatically
built this for us, right?
3666
02:41:14,513 --> 02:41:17,693
It's in the right format,
which is very nice.
3667
02:41:17,693 --> 02:41:20,940
In fact, we could probably
take this and why don't we,
3668
02:41:20,940 --> 02:41:22,890
we'll go over to the Thunder Client
3669
02:41:22,890 --> 02:41:24,780
and take a look at what's
going on over there.
3670
02:41:24,780 --> 02:41:26,557
So I'm gonna come back
to my Thunder Client,
3671
02:41:26,557 --> 02:41:30,423
I'm gonna make a new request
and I'm gonna hit, I'm gonna
3672
02:41:30,423 --> 02:41:35,040
do a get to this API that we
just built and check it out.
3673
02:41:35,040 --> 02:41:36,567
It comes back, it comes back with 200 OK.
3674
02:41:36,567 --> 02:41:38,400
And here's, the stuff that's coming back.
3675
02:41:38,400 --> 02:41:41,950
There's even some headers
in here. Oh, sorry, some.
3676
02:41:41,950 --> 02:41:43,560
If we look at the response, we can look at
3677
02:41:43,560 --> 02:41:45,631
the response headers
over here and we can see
3678
02:41:45,631 --> 02:41:49,828
that the content type was
set to application JSON,
3679
02:41:49,828 --> 02:41:50,910
Twilio always sends back to
3680
02:41:50,910 --> 02:41:52,953
the shenanigans none, which I love.
3681
02:41:54,240 --> 02:41:57,510
So now what we could do
is we can give this URL
3682
02:41:57,510 --> 02:41:59,880
to the team that's working
on making the front end,
3683
02:41:59,880 --> 02:42:01,446
you know that view application,
3684
02:42:01,446 --> 02:42:03,930
they could wire it up,
they could take this.
3685
02:42:03,930 --> 02:42:07,200
And as long as we match the
same format in what we return,
3686
02:42:07,200 --> 02:42:11,550
that is, as long as our API
maintains the same contract,
3687
02:42:11,550 --> 02:42:13,175
everything should just work.
3688
02:42:13,175 --> 02:42:15,540
So that's pretty awesome, right?
3689
02:42:15,540 --> 02:42:17,040
So let's move on to the next part.
3690
02:42:17,040 --> 02:42:19,490
I'm gonna comment out this bit.
3691
02:42:19,490 --> 02:42:22,440
So let's go ahead, let's
give it a, we'll we're
3692
02:42:22,440 --> 02:42:24,750
gonna go ahead and make
this an empty array, right?
3693
02:42:24,750 --> 02:42:25,797
So that's how you make an empty array.
3694
02:42:25,797 --> 02:42:27,510
And I'm gonna comment this out so that
3695
02:42:27,510 --> 02:42:29,277
we have it so that we can kind of look at
3696
02:42:29,277 --> 02:42:32,433
what the format is as we build stuff here.
3697
02:42:33,420 --> 02:42:35,970
So I'm gonna comment that out and in fact
3698
02:42:35,970 --> 02:42:38,430
I don't think I need the second one.
3699
02:42:38,430 --> 02:42:39,728
I'll just get that first one there
3700
02:42:39,728 --> 02:42:41,913
and give us some space there, awesome.
3701
02:42:42,870 --> 02:42:46,470
So now let's use the text messages
3702
02:42:46,470 --> 02:42:48,750
that were sent in, our incoming messages.
3703
02:42:48,750 --> 02:42:51,510
So we are gonna write
some JavaScript code.
3704
02:42:51,510 --> 02:42:54,960
Now if you aren't quite
fluent yet in JavaScript,
3705
02:42:54,960 --> 02:42:57,600
remember that is okay
and we've all been there
3706
02:42:57,600 --> 02:43:00,180
and we all, all of us, I guarantee you
3707
02:43:00,180 --> 02:43:02,670
everybody watching this understands
3708
02:43:02,670 --> 02:43:05,100
that what you're going
through can be challenging.
3709
02:43:05,100 --> 02:43:06,720
It's a new language.
3710
02:43:06,720 --> 02:43:08,700
I want you to try a
follow along conceptually.
3711
02:43:08,700 --> 02:43:10,290
And I want you to take
your time and I want you
3712
02:43:10,290 --> 02:43:12,930
to take advantage of being
in a video-based course.
3713
02:43:12,930 --> 02:43:16,290
This code that we are going
to write will be available
3714
02:43:16,290 --> 02:43:17,940
in the notes and I will walk us through it
3715
02:43:17,940 --> 02:43:19,980
and then I'll go over
it again translating it
3716
02:43:19,980 --> 02:43:22,274
into the concepts that we've covered.
3717
02:43:22,274 --> 02:43:25,263
Okay, are you ready? Let's do this.
3718
02:43:26,310 --> 02:43:30,363
So Twilio functions have
another great feature.
3719
02:43:33,270 --> 02:43:35,940
I can get access to a REST client,
3720
02:43:35,940 --> 02:43:38,640
to the Twilio REST
client then authenticate
3721
02:43:38,640 --> 02:43:41,340
a Twilio REST client
from the context object.
3722
02:43:41,340 --> 02:43:44,340
So context, get Twilio client.
3723
02:43:44,340 --> 02:43:48,090
Now remember that is going
to be using my Auth token
3724
02:43:48,090 --> 02:43:50,400
and my account SID, and
it's on this context,
3725
02:43:50,400 --> 02:43:51,960
it just automatically is authenticated,
3726
02:43:51,960 --> 02:43:54,030
which is really powerful
'cause now I can get access
3727
02:43:54,030 --> 02:43:59,030
to my thing because this
function is running as me, right?
3728
02:43:59,310 --> 02:44:01,495
So that's why it has
access to that information.
3729
02:44:01,495 --> 02:44:03,910
So remember we wanna get a hold of all
3730
02:44:03,910 --> 02:44:06,090
of the messages that were sent in.
3731
02:44:06,090 --> 02:44:08,493
So we're going to use the API to do that.
3732
02:44:09,540 --> 02:44:12,330
And remember we could have
multiple phone numbers.
3733
02:44:12,330 --> 02:44:13,770
So I'm gonna get the messages
3734
02:44:13,770 --> 02:44:15,630
that were just sent to this phone number.
3735
02:44:15,630 --> 02:44:16,710
So I'm going to await
3736
02:44:16,710 --> 02:44:18,660
'cause remember it returns a promise.
3737
02:44:18,660 --> 02:44:22,980
So client dot messages dot list.
3738
02:44:22,980 --> 02:44:24,390
And I need to do the ones that
3739
02:44:24,390 --> 02:44:27,600
are specifically to my Twilio number.
3740
02:44:27,600 --> 02:44:29,133
So that's (561) 816-5433.
3741
02:44:36,810 --> 02:44:38,550
And I'm pretty sure that's right.
3742
02:44:38,550 --> 02:44:42,600
I'm gonna look one more
time at my, oh there it is.
3743
02:44:42,600 --> 02:44:44,490
Yeah, that's it. So that's
my phone number there.
3744
02:44:44,490 --> 02:44:47,090
(561) 816-5433 you could go.
3745
02:44:47,090 --> 02:44:48,840
So there, it's also on your console.
3746
02:44:48,840 --> 02:44:50,184
Remember down here at the bottom,
3747
02:44:50,184 --> 02:44:52,789
(561) 816-5433, that's what I wanted.
3748
02:44:52,789 --> 02:44:55,950
I put that there and in fact, you know,
3749
02:44:55,950 --> 02:44:58,620
that's something you can
have multiple numbers
3750
02:44:58,620 --> 02:45:00,030
and that might be something that you want
3751
02:45:00,030 --> 02:45:03,122
to store possibly in an
environment variable.
3752
02:45:03,122 --> 02:45:07,380
So I think we should probably
do that. Let's do that.
3753
02:45:07,380 --> 02:45:10,832
So I'm gonna take this number here
3754
02:45:10,832 --> 02:45:12,450
and I'm gonna store that here.
3755
02:45:12,450 --> 02:45:14,910
You can see it in the
functions and the services here
3756
02:45:14,910 --> 02:45:17,187
we have this environment
variables, let's add to that.
3757
02:45:17,187 --> 02:45:19,770
And you'll see here, actually
add my Twilio credentials.
3758
02:45:19,770 --> 02:45:22,830
My account said my Auth token
to M, so that's why context
3759
02:45:22,830 --> 02:45:25,350
get Twilio client works is
because we've checked this.
3760
02:45:25,350 --> 02:45:27,420
If not, it won't work.
3761
02:45:27,420 --> 02:45:29,100
So, but it's checked by default.
3762
02:45:29,100 --> 02:45:33,090
So we're gonna do Twilio
number and that value
3763
02:45:33,090 --> 02:45:36,026
is going to be that and now in my code,
3764
02:45:36,026 --> 02:45:39,450
what's rad is I can use that like so,
3765
02:45:39,450 --> 02:45:42,600
I can say context dot Twilio number,
3766
02:45:42,600 --> 02:45:46,440
I can access anything that is
in those environment variables
3767
02:45:46,440 --> 02:45:48,450
that way and it's now it's in this code.
3768
02:45:48,450 --> 02:45:51,360
And now when I share this code,
you won't need to do that.
3769
02:45:51,360 --> 02:45:53,909
You will need to set your
environment variable though.
3770
02:45:53,909 --> 02:45:58,909
Awesome, so, and now what
we've gotta access to the,
3771
02:45:59,160 --> 02:46:01,320
well actually first we
set await and we need
3772
02:46:01,320 --> 02:46:03,240
to make sure that this function is marked
3773
02:46:03,240 --> 02:46:06,120
a sync so that that's required, right?
3774
02:46:06,120 --> 02:46:07,110
In order to make this work.
3775
02:46:07,110 --> 02:46:08,850
So now it's going to get the messages,
3776
02:46:08,850 --> 02:46:10,380
it's going to return the messages,
3777
02:46:10,380 --> 02:46:12,798
and now we're gonna loop
through those messages.
3778
02:46:12,798 --> 02:46:16,200
One of my favorite ways of
doing that is this for of loop.
3779
02:46:16,200 --> 02:46:19,533
So we're gonna say for
message of messages.
3780
02:46:20,550 --> 02:46:22,710
And for each one of those messages,
3781
02:46:22,710 --> 02:46:23,910
we're gonna go through some things.
3782
02:46:23,910 --> 02:46:28,170
So one thing you might not
have thought about before is
3783
02:46:28,170 --> 02:46:31,170
that when you send a message,
you can put multiple photos.
3784
02:46:31,170 --> 02:46:33,160
I think typically whenever
I send, when I just send one
3785
02:46:33,160 --> 02:46:35,310
or then I send another
message and another message,
3786
02:46:35,310 --> 02:46:38,370
you can actually add multiple
pictures before you send it.
3787
02:46:38,370 --> 02:46:41,130
So let me, let's do that.
3788
02:46:41,130 --> 02:46:43,590
Let's get a hold of all of the
pictures that are available.
3789
02:46:43,590 --> 02:46:47,280
So we'll say comp pics, we'll call,
3790
02:46:47,280 --> 02:46:50,730
we'll call our variable called
pics, right, for picture,
3791
02:46:50,730 --> 02:46:53,850
short for picture and
we'll say, await message.
3792
02:46:53,850 --> 02:46:57,510
Now the message object that
came back from this API.
3793
02:46:57,510 --> 02:47:00,600
Now we know that this was an
API call, but it is an object.
3794
02:47:00,600 --> 02:47:04,620
And that object actually has
access to these sub resources,
3795
02:47:04,620 --> 02:47:07,587
which was media, which we
walked through this before,
3796
02:47:07,587 --> 02:47:09,690
remember where there was the media URL
3797
02:47:09,690 --> 02:47:11,370
and we grabbed that
media URL and we looked
3798
02:47:11,370 --> 02:47:12,810
at all of them that were available?
3799
02:47:12,810 --> 02:47:14,700
This is basically doing that same thing.
3800
02:47:14,700 --> 02:47:19,410
And we're gonna get all of
the media that is available.
3801
02:47:19,410 --> 02:47:23,400
All right, so we have
that, we have the message,
3802
02:47:23,400 --> 02:47:26,127
we have all of the
pictures of that message.
3803
02:47:26,127 --> 02:47:28,470
And so for each of those pictures, right?
3804
02:47:28,470 --> 02:47:33,470
So each of the pictures,
we need to actually need
3805
02:47:33,690 --> 02:47:36,630
to declare the variable
just to be better there.
3806
02:47:36,630 --> 02:47:40,080
So we'll say for const,
pick of pics, right?
3807
02:47:40,080 --> 02:47:41,640
So we're gonna make a new variable called
3808
02:47:41,640 --> 02:47:44,310
pic looping through each one of these
3809
02:47:44,310 --> 02:47:46,215
that came back from this array, right?
3810
02:47:46,215 --> 02:47:50,580
So, for all of the messages,
for all of the pictures
3811
02:47:50,580 --> 02:47:52,620
in the messages, now what we're gonna do
3812
02:47:52,620 --> 02:47:54,840
is we're gonna add that to this gallery.
3813
02:47:54,840 --> 02:47:56,070
So this is an empty array,
3814
02:47:56,070 --> 02:47:57,924
but we're gonna dynamically add to it.
3815
02:47:57,924 --> 02:48:00,870
And the way that you add
to an array of course
3816
02:48:00,870 --> 02:48:04,200
is with gallery dot push, we're gonna push
3817
02:48:04,200 --> 02:48:07,263
a value onto the end of that array.
3818
02:48:08,640 --> 02:48:10,740
And we know what this is
supposed to look like, right?
3819
02:48:10,740 --> 02:48:13,410
It looks like this, it looks,
we have this source, right?
3820
02:48:13,410 --> 02:48:15,623
So source here, SRC is short
3821
02:48:15,623 --> 02:48:19,642
for source just from
forever in the internet.
3822
02:48:19,642 --> 02:48:24,642
So image source, SRC and
I know from my notes,
3823
02:48:25,950 --> 02:48:28,050
and I'm gonna pop over here real quick.
3824
02:48:28,050 --> 02:48:32,760
That this has, the media
resource has this thing called
3825
02:48:32,760 --> 02:48:37,760
a URI on it and it's relative
to this https.twilio.com.
3826
02:48:40,020 --> 02:48:43,590
So let's paste that.
3827
02:48:43,590 --> 02:48:44,850
So it's relative to that,
3828
02:48:44,850 --> 02:48:46,920
which means I that if
I'm going to display it,
3829
02:48:46,920 --> 02:48:48,540
I need to let our people know I'm gonna
3830
02:48:48,540 --> 02:48:50,790
give it a full URL,
which it requires, right?
3831
02:48:50,790 --> 02:48:52,590
It requires this full URL.
3832
02:48:52,590 --> 02:48:54,068
So it's got the front part of it.
3833
02:48:54,068 --> 02:48:56,850
And then I'm going to use the pic as
3834
02:48:56,850 --> 02:48:59,550
a property called URI, which we saw.
3835
02:48:59,550 --> 02:49:04,500
And remember what happens
is it has this content type
3836
02:49:04,500 --> 02:49:08,160
if we want to without an
extension, the media is returned.
3837
02:49:08,160 --> 02:49:11,220
Now I know that by default this is going
3838
02:49:11,220 --> 02:49:15,270
to give me this pic.URI is
going to end in dot JSON.
3839
02:49:15,270 --> 02:49:17,430
So I wanna replace that, I'm gonna use
3840
02:49:17,430 --> 02:49:21,060
the string method to
replace the dot JSON, right?
3841
02:49:21,060 --> 02:49:22,740
I don't want that dot JSON,
3842
02:49:22,740 --> 02:49:24,836
I want it to be no extension at all.
3843
02:49:24,836 --> 02:49:27,060
So I'm gonna use this empty string.
3844
02:49:27,060 --> 02:49:28,590
So I'm gonna replace the end of
3845
02:49:28,590 --> 02:49:31,710
what this pick was with dot JSON.
3846
02:49:31,710 --> 02:49:33,870
I'm gonna replace that
with an empty string,
3847
02:49:33,870 --> 02:49:35,700
which will remove it essentially, right?
3848
02:49:35,700 --> 02:49:36,840
That's what we're gonna to do.
3849
02:49:36,840 --> 02:49:39,120
Now I'm gonna do a comma
'cause I want to do more,
3850
02:49:39,120 --> 02:49:40,740
I want to have the description.
3851
02:49:40,740 --> 02:49:43,697
We wanna put the description
here as required because
3852
02:49:43,697 --> 02:49:46,410
that's what the little text
is at the bottom that it says,
3853
02:49:46,410 --> 02:49:49,050
and that's whatever they texted
in, in their message, right?
3854
02:49:49,050 --> 02:49:51,060
So I'm in this loop, I'm
looping through each one
3855
02:49:51,060 --> 02:49:53,760
of the pics, but I'm also, I
have access to this message
3856
02:49:53,760 --> 02:49:55,765
'cause I'm in this inner loop here, right?
3857
02:49:55,765 --> 02:49:58,080
So I still have access to the outer loop,
3858
02:49:58,080 --> 02:50:01,320
which is message dot body, right?
3859
02:50:01,320 --> 02:50:02,755
So those are inflated.
3860
02:50:02,755 --> 02:50:06,000
So that's whatever the text
was that somebody sent it in.
3861
02:50:06,000 --> 02:50:08,610
And we should also, we'll
make that the alt text too.
3862
02:50:08,610 --> 02:50:13,610
So alt tags are handy for
accessibility reasons.
3863
02:50:13,860 --> 02:50:16,110
There are people, you
might not think about this,
3864
02:50:16,110 --> 02:50:19,124
but there are people who are
going to use your application
3865
02:50:19,124 --> 02:50:22,710
that are using it without
being able to see,
3866
02:50:22,710 --> 02:50:25,410
some people are vision
impaired and they have
3867
02:50:25,410 --> 02:50:28,260
screen readers and alt
tags are awesome for that.
3868
02:50:28,260 --> 02:50:30,540
You always wanna make sure
that you make things accessible
3869
02:50:30,540 --> 02:50:32,970
for people who can't see what
it is that you're providing.
3870
02:50:32,970 --> 02:50:34,223
And alt tags are an
excellent way of doing that.
3871
02:50:34,223 --> 02:50:37,629
This is just one way that
you can make your application
3872
02:50:37,629 --> 02:50:41,100
more accessible and everybody
wins by it and then finally,
3873
02:50:41,100 --> 02:50:41,933
I'm just gonna grab this
3874
02:50:41,933 --> 02:50:44,321
last thumbnail width here, 200 pixels.
3875
02:50:44,321 --> 02:50:46,222
We can see later if people want
3876
02:50:46,222 --> 02:50:48,735
something different than that, what to do.
3877
02:50:48,735 --> 02:50:51,480
So, our gallery array for
each one of those pictures,
3878
02:50:51,480 --> 02:50:53,131
it's gonna add to it, right?
3879
02:50:53,131 --> 02:50:56,400
So it's gonna go and
it's gonna add each one
3880
02:50:56,400 --> 02:50:58,830
of those and we're still
gonna return that gallery.
3881
02:50:58,830 --> 02:51:01,053
And I think y'all, I think we got it.
3882
02:51:02,190 --> 02:51:05,070
Let's walk it one more time. Okay.
3883
02:51:05,070 --> 02:51:07,050
So we're gonna come in
here and we are going
3884
02:51:07,050 --> 02:51:10,020
to use the context that was passed in
3885
02:51:10,020 --> 02:51:12,090
to this function when it was called.
3886
02:51:12,090 --> 02:51:15,000
So when somebody hits
this URL, this function
3887
02:51:15,000 --> 02:51:17,100
is gonna run and it's
gonna know it's gonna
3888
02:51:17,100 --> 02:51:19,500
have access to those environment
variables that we saw.
3889
02:51:19,500 --> 02:51:21,447
It's gonna get access to
an authenticated client
3890
02:51:21,447 --> 02:51:23,220
and that client is logged in with
3891
02:51:23,220 --> 02:51:24,745
my account SID and my Auth token.
3892
02:51:24,745 --> 02:51:27,000
And we're gonna create an empty array,
3893
02:51:27,000 --> 02:51:29,670
this gallery thing here, we're
gonna create an empty array.
3894
02:51:29,670 --> 02:51:31,590
It's a list that we're going to populate.
3895
02:51:31,590 --> 02:51:33,660
We're gonna take our
messages and we're going
3896
02:51:33,660 --> 02:51:37,830
to push them into this
array so that it has
3897
02:51:37,830 --> 02:51:40,350
the format that is expected,
which is right here.
3898
02:51:40,350 --> 02:51:42,900
We're gonna turn what our
messages look like into this
3899
02:51:42,900 --> 02:51:46,050
so that later if we can use them that way.
3900
02:51:46,050 --> 02:51:48,630
So the way that we do that
is we use this client,
3901
02:51:48,630 --> 02:51:51,090
this client is a REST
client and it's gonna hit
3902
02:51:51,090 --> 02:51:53,640
the messages endpoint and
we know that it's going
3903
02:51:53,640 --> 02:51:55,890
to do a get, but it's
been abstracted for us.
3904
02:51:55,890 --> 02:51:58,380
So just, we're just say,
hey, list all of the numbers
3905
02:51:58,380 --> 02:52:00,840
that were sent to this
Twilio number and those are,
3906
02:52:00,840 --> 02:52:04,620
this context here, again,
this is passed in and the
3907
02:52:04,620 --> 02:52:07,260
Twilio number is set in my
environment variables over here.
3908
02:52:07,260 --> 02:52:09,330
So we're set 'cause because
you could have multiple, right?
3909
02:52:09,330 --> 02:52:11,100
You could have multiple
Twilio phone numbers.
3910
02:52:11,100 --> 02:52:14,130
So we wanna say only the
ones that were sent to.
3911
02:52:14,130 --> 02:52:16,350
So we're very, we're being very specific.
3912
02:52:16,350 --> 02:52:19,440
We're querying messages that
were sent to this number,
3913
02:52:19,440 --> 02:52:22,050
not from this number but to this number.
3914
02:52:22,050 --> 02:52:24,300
And we're gonna loop through
each one of those messages.
3915
02:52:24,300 --> 02:52:25,862
And for each one of those messages,
3916
02:52:25,862 --> 02:52:29,160
the object that's returned
from this has this property
3917
02:52:29,160 --> 02:52:31,123
called media, which lets
us get to a sub resource.
3918
02:52:31,123 --> 02:52:34,557
And you'll remember in the
JSON, there's a link to this
3919
02:52:34,557 --> 02:52:37,440
and we could go and query
this ourselves, but we don't
3920
02:52:37,440 --> 02:52:41,130
need to because the API
has wrapped up for us.
3921
02:52:41,130 --> 02:52:42,720
It's very nice, it's
nice, nice abstraction.
3922
02:52:42,720 --> 02:52:44,816
And we're going to get
the list of those picks.
3923
02:52:44,816 --> 02:52:46,680
And again, this is asynchronous.
3924
02:52:46,680 --> 02:52:50,010
We're using this, we're
waiting for it to come back,
3925
02:52:50,010 --> 02:52:52,020
we're waiting for these
values to come back.
3926
02:52:52,020 --> 02:52:53,400
So once we have these picks, we're gonna
3927
02:52:53,400 --> 02:52:55,500
loop through each of the
pick and we are going
3928
02:52:55,500 --> 02:52:58,668
to push out a source that has this.
3929
02:52:58,668 --> 02:53:02,010
We know that they all need
to start with API twilio.com
3930
02:53:02,010 --> 02:53:05,760
because the URI itself, this
URI here is relative meaning
3931
02:53:05,760 --> 02:53:08,880
it doesn't contain the
forward slash of this.
3932
02:53:08,880 --> 02:53:11,820
So we are going say
this is where it lives.
3933
02:53:11,820 --> 02:53:14,921
This is the API call that we
want you to do to get this
3934
02:53:14,921 --> 02:53:18,467
content is API twilio.com,
whatever is in the pick URI
3935
02:53:18,467 --> 02:53:21,270
'cause that's unique to
each one of the pictures.
3936
02:53:21,270 --> 02:53:24,840
And that URI comes with
a JSON at the end of it.
3937
02:53:24,840 --> 02:53:29,760
So if you look here,
let's see if we look here,
3938
02:53:29,760 --> 02:53:32,970
we can see that it ends
in this dot JSON, right?
3939
02:53:32,970 --> 02:53:35,160
And we want to get rid of that
'cause when you do get rid
3940
02:53:35,160 --> 02:53:38,160
of it, what happens is it
returns the actual picture.
3941
02:53:38,160 --> 02:53:38,993
We did that, I don't know
3942
02:53:38,993 --> 02:53:41,250
if you remember that earlier, we did that.
3943
02:53:41,250 --> 02:53:45,240
So, that will be removed
and then we're gonna use
3944
02:53:45,240 --> 02:53:47,400
the message and the message
is coming from here, right?
3945
02:53:47,400 --> 02:53:49,290
So the message for each of
these messages, we're gonna
3946
02:53:49,290 --> 02:53:52,289
get the message.body and the
description and the alt tag
3947
02:53:52,289 --> 02:53:55,740
for it, the alternate
text we're going to set.
3948
02:53:55,740 --> 02:53:58,140
And that's from that,
this is the required for,
3949
02:53:58,140 --> 02:54:00,570
remember this looks exactly
like what happened here.
3950
02:54:00,570 --> 02:54:05,570
So we are returning that here
and it should return JSON.
3951
02:54:05,970 --> 02:54:08,447
I'm going to save it. We
are going to deploy it.
3952
02:54:08,447 --> 02:54:11,130
We are going to cross
our fingers because this,
3953
02:54:11,130 --> 02:54:13,590
we are at that point where
we hope that the code
3954
02:54:13,590 --> 02:54:17,010
that we wrote works and
if it didn't, it is okay,
3955
02:54:17,010 --> 02:54:18,925
if it didn't work, we are
gonna work through it.
3956
02:54:18,925 --> 02:54:21,630
We might get an error, we
might not understand exactly
3957
02:54:21,630 --> 02:54:23,670
what that error is and we
are gonna work through it.
3958
02:54:23,670 --> 02:54:26,700
But I am going to save this and deploy it.
3959
02:54:26,700 --> 02:54:30,060
Now, let's assume that I gave
this out, I gave this out.
3960
02:54:30,060 --> 02:54:32,850
So now if somebody hits
this API, here we go.
3961
02:54:32,850 --> 02:54:34,080
So that's what it was before.
3962
02:54:34,080 --> 02:54:39,080
If we hit it, we should
see burritos. We got it.
3963
02:54:39,570 --> 02:54:41,160
So it says, "Look at
this beautiful burrito."
3964
02:54:41,160 --> 02:54:42,570
I texted that in. Wow.
3965
02:54:42,570 --> 02:54:45,090
Look at the clarity of the burrito.
3966
02:54:45,090 --> 02:54:48,150
Oh my gosh, you can see the
rice in the burrito emoji.
3967
02:54:48,150 --> 02:54:49,263
That's impressive. I didn't know that.
3968
02:54:49,263 --> 02:54:50,730
Look at that cat. All right.
3969
02:54:50,730 --> 02:54:55,353
So in fact let's go,
let's go hit it with our,
3970
02:54:56,730 --> 02:54:58,650
let's hit that same
request I wrote before.
3971
02:54:58,650 --> 02:55:00,570
It should be a little bit different now.
3972
02:55:00,570 --> 02:55:02,400
It's coming across here and I want
3973
02:55:02,400 --> 02:55:05,400
to look at the response and the response.
3974
02:55:05,400 --> 02:55:08,430
I'm gonna go and I'm gonna grab this URL
3975
02:55:08,430 --> 02:55:11,940
and make sure that it works.
3976
02:55:11,940 --> 02:55:13,620
So the source, right, the source that
3977
02:55:13,620 --> 02:55:16,680
came back here is, should
be the picture of it.
3978
02:55:16,680 --> 02:55:20,280
And if we look at it should
see my beautiful burrito.
3979
02:55:20,280 --> 02:55:23,280
Oh look at this thing,
I believe that burritos,
3980
02:55:23,280 --> 02:55:25,710
when they can stand up by themselves,
3981
02:55:25,710 --> 02:55:26,880
that's the sign of a good burrito.
3982
02:55:26,880 --> 02:55:29,010
Look at that burrito.
I got that in Arizona.
3983
02:55:29,010 --> 02:55:33,120
Oh man, and what we did with this code is
3984
02:55:33,120 --> 02:55:37,080
actually pretty common,
now in an app like the one
3985
02:55:37,080 --> 02:55:39,180
that we're building,
probably eventually what
3986
02:55:39,180 --> 02:55:41,430
you're going to do is you're
gonna store those photos
3987
02:55:41,430 --> 02:55:43,620
that were submitted
into a database, right?
3988
02:55:43,620 --> 02:55:44,453
And you're gonna do that from
3989
02:55:44,453 --> 02:55:45,600
this incoming message function.
3990
02:55:45,600 --> 02:55:47,490
You're gonna get it, you're gonna store it
3991
02:55:47,490 --> 02:55:49,290
if it's valid, if it's a valid picture,
3992
02:55:49,290 --> 02:55:50,430
you don't wanna show pictures that aren't,
3993
02:55:50,430 --> 02:55:52,674
you're gonna store it
in a database and then
3994
02:55:52,674 --> 02:55:56,730
you're going to format it
for whatever your client is.
3995
02:55:56,730 --> 02:55:57,990
You're gonna get that from a database.
3996
02:55:57,990 --> 02:56:00,120
So maybe instead of
coming back from this API,
3997
02:56:00,120 --> 02:56:01,800
you're gonna come from a database API
3998
02:56:01,800 --> 02:56:04,110
and you're gonna pull
back your information
3999
02:56:04,110 --> 02:56:05,760
and then you're gonna push it through.
4000
02:56:05,760 --> 02:56:08,070
And that database is gonna
be in its own format,
4001
02:56:08,070 --> 02:56:10,470
but you're going to make
it match whatever it is
4002
02:56:10,470 --> 02:56:12,660
that you are trying to push out there.
4003
02:56:12,660 --> 02:56:13,500
You're not gonna, it's not gonna
4004
02:56:13,500 --> 02:56:15,300
look exactly like the message, right?
4005
02:56:15,300 --> 02:56:17,850
I'm not gonna send back
one of these messages
4006
02:56:17,850 --> 02:56:19,440
and make my API look like that.
4007
02:56:19,440 --> 02:56:21,840
I'm gonna shape the data.
That's what that's called.
4008
02:56:21,840 --> 02:56:25,680
I'm gonna shape my data in the
way that I want to be used.
4009
02:56:25,680 --> 02:56:28,770
And we came with the spec.
This is the shape of the data.
4010
02:56:28,770 --> 02:56:30,450
So we took the data and we shaped it,
4011
02:56:30,450 --> 02:56:34,050
we formed it into what was expected.
4012
02:56:34,050 --> 02:56:36,810
All these burritos are making me hungry.
4013
02:56:36,810 --> 02:56:40,140
I think I'm gonna go fetch
one from my favorite taco-ria.
4014
02:56:40,140 --> 02:56:41,970
Now I'll make sure to snap a pic.
4015
02:56:41,970 --> 02:56:43,890
You should get one too
actually. You deserve it.
4016
02:56:43,890 --> 02:56:47,190
You deserve a burrito
and when we get back,
4017
02:56:47,190 --> 02:56:49,590
we'll look at how to fetch this data
4018
02:56:49,590 --> 02:56:52,383
that we just generated in our client app.
4019
02:56:53,730 --> 02:56:56,384
So we've coded our external public API
4020
02:56:56,384 --> 02:56:58,080
and it's ready to be consumed.
4021
02:56:58,080 --> 02:57:00,982
Now our API uses an external API, Twilio,
4022
02:57:00,982 --> 02:57:02,640
and we're going to need to use our
4023
02:57:02,640 --> 02:57:05,445
web framework Views API
to retrieve the data.
4024
02:57:05,445 --> 02:57:09,960
And to do that we're gonna
need to use the web API Fetch.
4025
02:57:09,960 --> 02:57:11,490
See, APIs are everywhere.
4026
02:57:11,490 --> 02:57:13,440
No wonder you came
looking for this course.
4027
02:57:13,440 --> 02:57:15,030
All right, let's make use of our
4028
02:57:15,030 --> 02:57:18,330
server-based API and our
client side application.
4029
02:57:18,330 --> 02:57:22,279
All right, so just like I
just consumed my burrito,
4030
02:57:22,279 --> 02:57:25,968
we are going to consume that
API that we just created.
4031
02:57:25,968 --> 02:57:28,590
So if I scroll down here,
remember we're passing
4032
02:57:28,590 --> 02:57:32,280
in this gallery here
and we scroll down here
4033
02:57:32,280 --> 02:57:34,410
into this load images and this load images
4034
02:57:34,410 --> 02:57:38,520
gets kicked off from
the API of view, right?
4035
02:57:38,520 --> 02:57:40,549
So view has these lifecycle APIs and when
4036
02:57:40,549 --> 02:57:43,440
the things mounted, it's
gonna call this load images.
4037
02:57:43,440 --> 02:57:46,230
We're gonna come into load
images and now we have some
4038
02:57:46,230 --> 02:57:49,410
to-dos that we have already to done.
4039
02:57:49,410 --> 02:57:50,340
So we are going to use the
4040
02:57:50,340 --> 02:57:52,800
messaging API to use submitted photos.
4041
02:57:52,800 --> 02:57:54,880
We did that, we did that in our API
4042
02:57:56,070 --> 02:57:57,990
and then we are going to
create a web-based API
4043
02:57:57,990 --> 02:57:59,784
that matches this expected response.
4044
02:57:59,784 --> 02:58:01,470
We also did that, didn't we?
4045
02:58:01,470 --> 02:58:02,824
We did that. So let's get rid of that.
4046
02:58:02,824 --> 02:58:03,930
All right, so here we go.
4047
02:58:03,930 --> 02:58:05,700
So this has got a suggestion here
4048
02:58:05,700 --> 02:58:07,380
of what to start doing here.
4049
02:58:07,380 --> 02:58:09,236
So I'm gonna uncommon this.
4050
02:58:09,236 --> 02:58:14,236
So we're gonna create a new
response object and we are going
4051
02:58:14,250 --> 02:58:18,240
to await and we are going
to use Fetch and Fetch here
4052
02:58:18,240 --> 02:58:22,052
is part of the web API that
browsers must implement
4053
02:58:22,052 --> 02:58:24,780
to do exactly what we're
trying to do, right?
4054
02:58:24,780 --> 02:58:26,940
We want to fetch data from our API.
4055
02:58:26,940 --> 02:58:29,670
Now this happens to be on the same server.
4056
02:58:29,670 --> 02:58:33,090
So we can use a relative link
like this slash API here.
4057
02:58:33,090 --> 02:58:34,604
We don't need to specify
the server, right?
4058
02:58:34,604 --> 02:58:39,073
It's assumed. So our API,
we called that, right?
4059
02:58:39,073 --> 02:58:41,293
We called it API/pics.
4060
02:58:41,293 --> 02:58:44,757
So slash pics is what we
are going to hit there.
4061
02:58:44,757 --> 02:58:46,350
And you notice that it's using await
4062
02:58:46,350 --> 02:58:48,090
because this is an async function.
4063
02:58:48,090 --> 02:58:51,507
So Fetch returns a promise
and it's going to return
4064
02:58:51,507 --> 02:58:56,507
that response and that
response has a method on it
4065
02:58:57,540 --> 02:59:01,320
called JSON that will actually return
4066
02:59:01,320 --> 02:59:03,750
the JSON representation
of whatever came back.
4067
02:59:03,750 --> 02:59:05,640
So what I'm gonna do is I'm gonna get rid
4068
02:59:05,640 --> 02:59:07,800
of this gallery, this hard coded gallery
4069
02:59:07,800 --> 02:59:11,160
that is gone and I am
going to say REST await.
4070
02:59:11,160 --> 02:59:12,660
We are going to await 'cause this method
4071
02:59:12,660 --> 02:59:16,380
is also asynchronous, response dot JSON.
4072
02:59:16,380 --> 02:59:18,259
So that's gonna get back whatever is
4073
02:59:18,259 --> 02:59:20,220
in this response that came back.
4074
02:59:20,220 --> 02:59:22,380
This response has all
sorts of metadata about it,
4075
02:59:22,380 --> 02:59:24,150
but we just want to
get the data out of it.
4076
02:59:24,150 --> 02:59:25,740
And that's by using this dot JSON.
4077
02:59:25,740 --> 02:59:28,017
And because our API is JSON enabled,
4078
02:59:28,017 --> 02:59:29,523
it's just gonna come out.
4079
02:59:31,050 --> 02:59:35,599
All right, let's deploy it. I cannot stop.
4080
02:59:35,599 --> 02:59:38,270
Oops, this is not unable to
deploy 'cause I didn't save it.
4081
02:59:38,270 --> 02:59:40,320
So I need to save it first.
4082
02:59:40,320 --> 02:59:43,470
I cannot stop thinking about
that burrito. It was so good.
4083
02:59:43,470 --> 02:59:46,860
I submitted a selfie of
myself and I texted it
4084
02:59:46,860 --> 02:59:49,320
to my Twilio number and I got a reply back
4085
02:59:49,320 --> 02:59:50,850
from my Twilio trial account, right?
4086
02:59:50,850 --> 02:59:52,770
And it says thanks for submitting it.
4087
02:59:52,770 --> 02:59:55,350
So if all goes well when we look here,
4088
02:59:55,350 --> 02:59:57,260
I'll be able to show you the burrito
4089
02:59:57,260 --> 02:59:59,940
that I texted to my number.
4090
02:59:59,940 --> 03:00:03,360
So it's been deployed and
I'm gonna come in here
4091
03:00:03,360 --> 03:00:06,190
under this assets and
I'm gonna copy this URL
4092
03:00:07,194 --> 03:00:11,160
and I am going to paste it
here and this view application
4093
03:00:11,160 --> 03:00:12,978
is gonna go and it's gonna
hit my API and it's gonna
4094
03:00:12,978 --> 03:00:15,720
bring back some photos into
this gallery and here it is.
4095
03:00:15,720 --> 03:00:16,980
Look at the size of this thing.
4096
03:00:16,980 --> 03:00:19,080
It was truly bigger than my head.
4097
03:00:19,080 --> 03:00:21,390
So if we click that, we could go,
4098
03:00:21,390 --> 03:00:25,653
we could see my other beautiful
burrito there as well.
4099
03:00:26,700 --> 03:00:30,420
Now let's look again back here
at the client side of things
4100
03:00:30,420 --> 03:00:34,230
and just take a look at
how beautiful this is.
4101
03:00:34,230 --> 03:00:36,510
It's just two lines and
it's hitting our APIs
4102
03:00:36,510 --> 03:00:40,560
and that's the power of this API.
4103
03:00:40,560 --> 03:00:44,340
We were able to hit an
API and get user submitted
4104
03:00:44,340 --> 03:00:47,007
text messages, text photos, right?
4105
03:00:47,007 --> 03:00:48,630
And it only took two lines and really
4106
03:00:48,630 --> 03:00:50,070
it only took one line actually.
4107
03:00:50,070 --> 03:00:51,030
You know, like if we could have
4108
03:00:51,030 --> 03:00:53,520
like chained some stuff on top of this.
4109
03:00:53,520 --> 03:00:55,680
Awesome, now one thing that
I do wanna note is that
4110
03:00:55,680 --> 03:00:58,154
there's no authentication
at all to this API, right?
4111
03:00:58,154 --> 03:01:01,530
I didn't supply any
authentication information at all.
4112
03:01:01,530 --> 03:01:05,826
It's open to everyone and
that's kind of a good thing
4113
03:01:05,826 --> 03:01:10,350
if you are working on a
client side application,
4114
03:01:10,350 --> 03:01:12,120
you don't wanna pass your keys around.
4115
03:01:12,120 --> 03:01:14,460
Like I would not wanna
put my Twilio keys here
4116
03:01:14,460 --> 03:01:16,230
on this page because I
don't know if you know this,
4117
03:01:16,230 --> 03:01:18,930
but you can actually see
everything that comes down.
4118
03:01:18,930 --> 03:01:21,510
So I'm gonna view the source
of this and you can see here's
4119
03:01:21,510 --> 03:01:23,340
the source that we're looking
at and if I hadn't used
4120
03:01:23,340 --> 03:01:26,250
any sort of API keys, I
would see them right here.
4121
03:01:26,250 --> 03:01:29,100
You don't wanna leak your
keys that way, check the notes
4122
03:01:29,100 --> 03:01:31,500
for more information on
how to get around this.
4123
03:01:31,500 --> 03:01:33,330
But typically this is
what you do is you write
4124
03:01:33,330 --> 03:01:36,540
a server that then the server keeps track
4125
03:01:36,540 --> 03:01:38,400
of all the keys and you
connect to the server.
4126
03:01:38,400 --> 03:01:40,380
But if you do need to
provide some authentication
4127
03:01:40,380 --> 03:01:42,840
locally on the client,
there are ways to do that.
4128
03:01:42,840 --> 03:01:46,620
Check the notes. But look
at this, look at this.
4129
03:01:46,620 --> 03:01:50,160
You did this, you have
designed a new interface,
4130
03:01:50,160 --> 03:01:54,637
a text messaging interface, right, a TMI.
4131
03:01:56,370 --> 03:01:57,900
Well I hope this wasn't TMI
4132
03:01:57,900 --> 03:02:01,320
or also known as too
much information for you.
4133
03:02:01,320 --> 03:02:02,829
You learned a whole lot about APIs
4134
03:02:02,829 --> 03:02:04,920
and not just the web-based ones.
4135
03:02:04,920 --> 03:02:08,460
You saw them in practice and
you even built your own one.
4136
03:02:08,460 --> 03:02:11,970
You really deserved that
burrito. Awesome job.
4137
03:02:11,970 --> 03:02:15,060
You've just built and
consumed your own API.
4138
03:02:15,060 --> 03:02:16,700
Now here's my question to you.
4139
03:02:16,700 --> 03:02:18,347
Do you think that the API code that
4140
03:02:18,347 --> 03:02:21,690
we wrote together should
be considered RESTful?
4141
03:02:21,690 --> 03:02:22,920
Well, why don't we take a look at
4142
03:02:22,920 --> 03:02:25,050
our weathered scavenger hunt card.
4143
03:02:25,050 --> 03:02:27,660
So it's definitely a
client server architecture.
4144
03:02:27,660 --> 03:02:29,503
Our client happens to be, in this case,
4145
03:02:29,503 --> 03:02:31,017
a view application running in the browser
4146
03:02:31,017 --> 03:02:33,600
and our server is a
serverless node application.
4147
03:02:33,600 --> 03:02:36,450
But any client could connect and use this.
4148
03:02:36,450 --> 03:02:39,480
Statelessness. It's
definitely stateless, right?
4149
03:02:39,480 --> 03:02:41,610
We aren't requiring any prior knowledge
4150
03:02:41,610 --> 03:02:44,853
about the client, cacheability.
4151
03:02:46,500 --> 03:02:48,510
Well, at the moment we
aren't providing any
4152
03:02:48,510 --> 03:02:50,550
caching information,
though we could, right?
4153
03:02:50,550 --> 03:02:52,980
We could fairly easily pay
attention to those headers
4154
03:02:52,980 --> 03:02:55,170
coming in and we could
respond appropriately.
4155
03:02:55,170 --> 03:02:57,390
It would require us writing
some additional code
4156
03:02:57,390 --> 03:02:59,040
and thinking through
some of the edge cases,
4157
03:02:59,040 --> 03:03:00,624
but we could do it.
4158
03:03:00,624 --> 03:03:02,463
Let's put that in the maybe column.
4159
03:03:03,450 --> 03:03:06,450
Layered system. Yeah, for sure, right?
4160
03:03:06,450 --> 03:03:08,280
In fact, it's a little layered already.
4161
03:03:08,280 --> 03:03:10,730
Our API is calling another
API, but our client
4162
03:03:10,730 --> 03:03:13,320
doesn't need to know that,
we can also add additional
4163
03:03:13,320 --> 03:03:15,670
functionality and the
contract wouldn't change.
4164
03:03:16,590 --> 03:03:19,860
Code on demand. We haven't
even talked about this one yet.
4165
03:03:19,860 --> 03:03:22,200
And it's the only optional requirement.
4166
03:03:22,200 --> 03:03:24,900
Basically this means that
your API returns code
4167
03:03:24,900 --> 03:03:27,080
that is runnable, like maybe it returns
4168
03:03:27,080 --> 03:03:30,210
an embedable widget or some
actual JavaScript code.
4169
03:03:30,210 --> 03:03:31,980
This doesn't make any
sense in our use case
4170
03:03:31,980 --> 03:03:33,180
and that's totally okay.
4171
03:03:33,180 --> 03:03:35,160
So we're gonna drop this
one into the no column.
4172
03:03:35,160 --> 03:03:36,900
So we're looking good so far.
4173
03:03:36,900 --> 03:03:40,500
But here comes the
doozy, uniform interface.
4174
03:03:40,500 --> 03:03:43,200
So remember this one has four subsections,
4175
03:03:43,200 --> 03:03:46,500
resource identification
and requests, ruh row.
4176
03:03:46,500 --> 03:03:48,990
Currently we are just
representing all the messages
4177
03:03:48,990 --> 03:03:51,660
as objects and absolutely
no way to identify them.
4178
03:03:51,660 --> 03:03:54,180
So we failed this sub requirement
4179
03:03:54,180 --> 03:03:55,620
and therefore this is a no.
4180
03:03:55,620 --> 03:03:59,580
But let's keep going
through the rest of these,
4181
03:03:59,580 --> 03:04:01,560
pun intended, sorry.
4182
03:04:01,560 --> 03:04:04,050
Resource manipulation
through representations.
4183
03:04:04,050 --> 03:04:05,648
We definitely do not allow any sort
4184
03:04:05,648 --> 03:04:09,420
of manipulation of the images
so this is another fail.
4185
03:04:09,420 --> 03:04:12,120
Self descriptive messages, we
haven't gone over this yet,
4186
03:04:12,120 --> 03:04:15,480
but by using headers we
can tell that this is JSON.
4187
03:04:15,480 --> 03:04:17,730
The message sent down
has a type and it's clear
4188
03:04:17,730 --> 03:04:19,833
that it should be JSON decoded to be used.
4189
03:04:20,730 --> 03:04:24,180
Hypermedia as the engine
of application state.
4190
03:04:24,180 --> 03:04:29,180
And last but certainly not
least, HATEOAS or HATEOAS,
4191
03:04:29,940 --> 03:04:33,180
it's an often forgot about
part of the RESTful constraint.
4192
03:04:33,180 --> 03:04:36,120
And the idea here is that
there are links to show off
4193
03:04:36,120 --> 03:04:38,430
what more you could do with
this and where you could
4194
03:04:38,430 --> 03:04:41,520
find related resources,
it provides URIs or links.
4195
03:04:41,520 --> 03:04:44,130
And we did see this in both
the Spotify and Twilio ones.
4196
03:04:44,130 --> 03:04:47,730
However, ours doesn't provide
links to other resources.
4197
03:04:47,730 --> 03:04:50,460
So we don't have a RESTful
API and that's okay,
4198
03:04:50,460 --> 03:04:51,720
it's gonna suit our needs.
4199
03:04:51,720 --> 03:04:52,920
It does look like we could get
4200
03:04:52,920 --> 03:04:54,990
there pretty quickly if we wanted to.
4201
03:04:54,990 --> 03:04:57,540
One thing I want you to gain
from that exercise though is
4202
03:04:57,540 --> 03:05:00,230
that you now have the ability
to identify whether or not
4203
03:05:00,230 --> 03:05:03,480
an API is RESTful and I
hope that felt pretty good.
4204
03:05:03,480 --> 03:05:05,010
We've now completed the scavenger hunt,
4205
03:05:05,010 --> 03:05:06,390
we revealed all the constraints,
4206
03:05:06,390 --> 03:05:08,370
and I hope most of those are pretty clear.
4207
03:05:08,370 --> 03:05:10,560
Please don't feel like you
need to memorize those.
4208
03:05:10,560 --> 03:05:11,790
You can find those same constraints
4209
03:05:11,790 --> 03:05:13,740
littered all over the internet.
4210
03:05:13,740 --> 03:05:15,660
Now as a prize for finishing
4211
03:05:15,660 --> 03:05:17,310
the constraint scavenger hunt,
4212
03:05:17,310 --> 03:05:19,860
I've dropped links to my
favorite REST API constraint
4213
03:05:19,860 --> 03:05:22,530
documentation for you to
lean on, should you need to.
4214
03:05:22,530 --> 03:05:25,230
I've also included links to
the Popular REST API frameworks
4215
03:05:25,230 --> 03:05:27,480
that will help you design RESTful APIs.
4216
03:05:27,480 --> 03:05:30,630
Make sure to check out
the notes. You did it.
4217
03:05:30,630 --> 03:05:33,480
You just completed a
whirlwind introduction to APIs
4218
03:05:33,480 --> 03:05:35,940
and I hope that you can
see how much more power
4219
03:05:35,940 --> 03:05:37,980
they can add to your programming journey.
4220
03:05:37,980 --> 03:05:39,600
By looking at interfaces in general,
4221
03:05:39,600 --> 03:05:41,910
I hope you're more comfortable
with the idea of not
4222
03:05:41,910 --> 03:05:45,150
fully understanding exactly
how something is working,
4223
03:05:45,150 --> 03:05:47,010
but still leaning on that abstraction
4224
03:05:47,010 --> 03:05:49,080
to build your tools and applications.
4225
03:05:49,080 --> 03:05:51,117
Do this all the time with
physical object interfaces
4226
03:05:51,117 --> 03:05:53,970
and APIs or application
programming interfaces.
4227
03:05:53,970 --> 03:05:55,560
They aren't all that different.
4228
03:05:55,560 --> 03:05:56,940
I hope you enjoyed taking this course.
4229
03:05:56,940 --> 03:05:59,400
I know I had a lot of fun making it.
4230
03:05:59,400 --> 03:06:00,960
If you think someone
you know might benefit
4231
03:06:00,960 --> 03:06:03,330
from this course, please
share it with them.
4232
03:06:03,330 --> 03:06:05,880
I'd love to hear your feelings,
your thoughts, your dreams.
4233
03:06:05,880 --> 03:06:07,890
So I threw together a
little something using
4234
03:06:07,890 --> 03:06:10,350
a smattering of APIs to
capture your feedback.
4235
03:06:10,350 --> 03:06:12,480
If you've got the time, I'd love to
4236
03:06:12,480 --> 03:06:15,120
have you answer a quick text-based survey,
4237
03:06:15,120 --> 03:06:17,490
text "feedback" to the
number on your screen.
4238
03:06:17,490 --> 03:06:19,380
Well actually, you know what, if you want,
4239
03:06:19,380 --> 03:06:22,200
you can also call and just
leave me a message too.
4240
03:06:22,200 --> 03:06:23,910
I use an API for that too.
4241
03:06:23,910 --> 03:06:26,760
So please, please, please
keep me posted on your journey
4242
03:06:26,760 --> 03:06:29,280
and really, I can't wait
to see what you build.
4243
03:06:29,280 --> 03:06:31,972
Thanks again for hanging out
and we'll see you real soon.
4244
03:06:31,972 --> 03:06:34,639
(upbeat music)
339387
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.