This course is an excellent introduction to APIs for beginners. This is an updated version
of what is already one of the most popular API courses on the Internet. Craig Dennis is back as the instructor and in my opinion he is one of the best developer educators out there. - Hello, I'm Craig and I'm a developer. In this course, we are
going to be exploring a term that you've
probably heard quite a bit. That term is API or application
programming interface. In addition to being able to
recite what it stands for, when you complete this course, you'll be able to
discuss what an API does. You'll understand why they
exist and you'll be able to list the many benefits
that they provide. You'll even get some
hands-on experience using a few popular web APIs,
which will give you a taste of what all this
excitement is about. We'll be starting from the very beginning, so there really isn't too much I'm gonna be expecting you to know
before starting this course. I would like to request that you have a touch of experience with coding and a wee bit of knowledge about the web. If you've written any program at all, even the typical first program, you know the one where you
write the words, "Hello, world." If you've done that in
any programming language, you'll pretty much be
ready for this course. It will be helpful if you
have a basic understanding of how the web works with
web servers and browsers, but don't sweat it,
we'll touch on that too. Now, if you haven't met these
requirements, please check the notes attached to this
video for where to get started with some beginning web
and programming concepts. That reminds me, you should take some time to get used to your learning environment. The notes that I just discussed
are attached to this video and I'll also drop more
information into that section to keep you updated on
what might have changed from my right now to your
right now and I'll do my best to remind you to look in
there when there's something I think you just have
to see, but you really should get in the habit
of checking that area out. There'll be tons of
juicy information there. You might be getting a real
bad case of deja vu right now. This is a refresh of a course from 2019, which these days seems like
about 30 years ago or something. If you saw that version, welcome back. Technology is constantly
evolving and just updating the notes wasn't cutting
it, so this is version two. Thanks for all the feedback, by the way, a lot of yours and your
fellow learner's suggestions are implemented in this
new updated version. All that to say, we got you. These videos have captions,
so if you feel like you might benefit from having
those on, please use them. This space is all yours. If you want me to speak slower, please use the speed
controllers to slow me down, and if I'm taking a
long time, speed me up. I make a pretty good chipmunk. And last but certainly
not least, take advantage of the fact that you are
in a video-based course. If you need me to repeat myself, use the video controls to rewind me. If you feel like you need
to take a break to let something sink in, by all
means, please pause me. I'll be right here waiting for you. I know that I've gotten
into some pretty bad viewing habits with all
this streaming media. Now, while binging might be a great way to consume an entire season
of your favorite show, it's not the best way
to learn something new. Education isn't meant to be
binged and because of this, I'll probably remind you
quite a bit to take breaks and encourage you to let what
you just learned marinate. All right, let's get to it. API, those three little letters generate quite the buzz, don't they? First, I'd like to take
some time upfront here and clearly break down what is meant by application programming interface. By understanding its purpose
and a touch of its history, I think you'll start to see
its importance and begin to understand why this term
keeps popping up in your life. After we get a good grasp on
the what and the why of APIs, we'll go and learn how to
explore two existing ones. We'll get familiar with
several handy tools that you can use to interact
with web-based APIs. We'll use those tools to
hit an external web API to send actual text
messages and we'll get some inteRESTing data back from a
streaming music service API. Once we get some practice
using the APIs, we'll use them in a web application that
you'll actually publish. The application that we're
gonna be building is going to receive user submitted
photos via a text message, and then we'll use an API to
display a collection of all these photos and you get
to come up with the prompt. Send me the latest photo
on your phone, dog pics, please, what's for
dinner, whatever you want. I can't wait to see what you build and what your family and
friends submit to it. We are going to be strictly
using APIs in this course, we won't be writing our own. While you most likely are gonna end up learning some best
practices in API design, we won't be covering that specifically. There are many great
courses available that show the creation thought process,
and I've linked to some of my faves in the notes
attached to this video. In my opinion, the best
way to start learning about any acronym is to focus
on each individual letter. For API, I think we should start on that last character, the I, interface. Let's talk a bit about the interfaces that you've seen already. Interfaces are all around us. For instance, this radio here,
it has a familiar interface. The interface allows me to do
things like change the volume, change the station, I
can turn it off and on. I literally have no
idea how anything inside this thing works, but still
the interface allows me to control the way that it
works through the options that are exposed and that's
pretty great, isn't it? The magic that is happening is completely abstracted away from me. I'm still in control of what has been determined that I, a user can handle. Interfaces usually evolve over time, like an alarm clock radio for example. It has my familiar volume
and station controls and it also adds some new features like changing the time and setting the alarm. I still have no idea how this
works implementation wise, but the interface is something
that I can understand. Usually, and as technology evolves and new options come into existence, they make their way into the
new versions of the interface. Still abstracting away things for us, but enabling us to be in
control of the new features. Sometimes these physical
interfaces get so recognizable, they even make it into GUIs. Hey, did you hear that? There it is again, GUI, G-U-I,
graphical user interface. This is my streaming
music app on my phone. There's my familiar Play button
in the user interface or UI, and I know what the Play
button does when I press it, but I have no idea how it does it and I'm okay with that
level of abstraction. What would I do in public
transit without music? Like, talk to people? Hi, how's it going? Now, the developer who wrote this streaming music application, of course, understands how the Play button works. She coded the button so
that when it gets clicked, the music starts playing. Here's the thing though,
our developer is also working with quite a
few interfaces that are abstracting the way some
of the details for her. For instance, she wrote code that happens when the button is clicked. She probably did that
using an event handler on the button, like onClick. What she didn't have to do,
however, was write the code that makes the button interact
and change with the press. She didn't have to write the code that makes that familiar clicking noise. It was already there for her. Buttons are, in fact, an interface. They provide the developer
the means of controlling its interactions while abstracting way how that actually works, implementation wise. This button is part of the API or application programming interface and it's available from
the application framework that was used to create the app. Because most apps need buttons, this interface has been
created and provided to our developer or
application programmer to use. By implementing the button
interface, our developer was able to make her code run
when the button was clicked. It's worth noting that
the code probably also uses a media player API
that is provided with the operating system of the
device like Android or iOS. This media player API abstracts
away needing to understand details of how to send
audio data to hardware. The developer knows they just want to call the play method on the media player API. I suppose too, the song
isn't stored on the device, it's being streamed over
the network, so a web-based API call has been made over
the internet to get that data. It's actually APIs all
the way down to the ones and zeros providing
abstractions at many levels, so let's take a look at what all of these interfaces have in common. They all define ways for us
to interact or communicate with an object, whether
that object be physical or software, and as a
user of the interface, we don't need to understand
the implementation, we don't need to know how it works. We just need to know what
we've been allowed to change or see, interfaces abstract
away the implementation. Now, while the UI or user
interface is made for the user of the
application, the API is made for the application programmer to use and extend in their applications. With the I covered in our API, let's take a deeper look at
the REST of the API acronym. An API is a contract of sorts. It defines how it is expected to be used and it defines what you can
expect to receive by using it. Think of it as a set of tools designed for software developers
like yourself to use. An API is created to help
make your life easier by giving you access to
data and by providing you with an abstraction of the
implementation, you know, not needing to know how it's
doing, whatever it's doing. They save you from needing to
create everything yourself, like when designed well, they
make nearly impossible things happen with just a few lines of code. Now you're probably starting to see why it's important to get
familiar with them, right? I want to do a quick word
of warning here about some naming issues that
you'll probably run into. These days, the term API
is almost always used as a way to explain web-based APIs. In fact, it's probably
safe to assume that when you hear API in the wild, it's most likely that people are talking
about a web-based API. We'll explore those here in a few. However, if we focus on all types of APIs instead of just the web-based subset, we'll get a better look
into why web-based APIs are so popular, so hang tight,
we're getting there. APIs are everywhere in
your software journey just about everywhere you look,
your programming language, whichever one that might
be, provides many APIs. Let's take a look at one that
is common in all of them. They all provide some way
of working with strings, you know, like a series of characters. Wanna make your text all uppercase? Just call the API method and voila. You could probably create
the uppercase string all by yourself by doing some
sort of low level bit math on each character, but you don't need to because your programming
language has abstracted away that for you and provided
a handy string API. It exists because this is a common enough problem
that developers run into. Because these programming
language specifications are just interfaces, different
operating systems can supply their own implementation so that the code works properly in their environment. I think an easy way of
picturing this is to think about how different operating systems like Windows or Mac OS
maintain their files. They're totally different,
yet your programming language provides a single API for
working with the file system. You can write one script and it works both in Mac and Windows. It's the implementation that takes care of all the details for
you, pretty cool, right? Definitely something to be thankful for. It makes our lives so much
easier not having to worry about what operating system is
being used and the importance of an API tool language
cannot be understated. There have been some
fascinating legal cases where it's been questioned if
the language API itself, again, not the implementation
can be copyrighted, check out the notes for more on that. Along similar lines, there
are different web browsers, you know, like Google Chrome, Microsoft Edge, Safari, Firefox, Brave. Now, you might not have
pondered this before, but isn't it amazing
that you can write code for the web and it will
work in any of 'em? This works because
there's a set of web APIs that web browsers all must implement in order to make that
magic happen for you. We are standing on the
shoulders of giants, folks, and we really should thank
those giants more often. There are authors and
maintainers of libraries that package up code to
solve common problems so that you don't need to do it yourself. For instance, do you know
how to programmatically make a photo black and white? Me neither, but I can download and import an image package into my
application and suddenly I can. I just call a method and boom, I wish real life skills worked this way. I'd import dancing so I could be more fun at weddings, cha cha cha. Frameworks provide an API
that allow you to extend what has been provided
to make it your own. Like for example, most web
frameworks provide you with the ability to add a new
route to your web application. It allows you to write out dynamic data to a template that you
specified, and you do all of this with just a
handful of lines of code. You don't need to understand
how it's doing things, but you do need to know how
to write an implementation to what the framework is expecting. In this case, you're using
the API, the contract, to write a valid implementation
that meets the requirements. Now, all these APIs that
we just talked about, they're local to our code base,
they exist within our code. We use them to avoid recreating the wheel. That is to say they assist
us in accomplishing tasks that we need to perform
by abstracting away a ton of the work for us, the stuff that we developers shouldn't be worrying about. We should be focusing on the
business problem at hand, and that means a big part
of your job is figuring out how to leverage these
APIs to your advantage. Now, I think this is an excellent time for you to take a break. I just gave you a lot to think about and I'd like you to take
some time and breathe. Why don't you jot down some
APIs that you've used today? Even if you weren't coding, I know that you've seen some in action. If you're having a hard
time thinking of some, I'll give you a hint. You're watching a video right
now inside of a web browser. When we return, we'll explore
the concept of remote APIs, ones that aren't executing
locally in our code base and why that is such a powerful concept. (upbeat music) It took me a while to
find this remote control. It was in the couch.
It's always on the couch. Anyways, this remote has
an interface on it, right? There's a Power button and when
I press the Channel button, it changes the channel, when
I press the Volume button, it sends the request to my
radio and the volume changes as if I turned the volume
up using the interface on the device itself, and we
know why that's important. I want to remotely control my device. I don't want to get up from my chair. There are of course, more
or less lazy reasons as to why we'd want to
remotely control objects. This cute little robot, for
instance, has a remote API. You can send commands
to it and it responds and it even sends back sensor information. These traffic signs can
change based on an API call. This drone here is remotely controlled by an app on my phone, see? (drone whirring and crashing) And it's not just physical objects that benefit from remote APIs. Oftentimes we don't have
space on our local machines for all the data that's
available, like for example, have you ever used one of those apps that helps you figure
out what song is playing? You send up a snippet of a
song that you heard playing at a grocery store using your microphone, and it sends back exactly what song it is. It's usually Phil Collins. It turns out that both grocery stores and yours truly love Phil Collins. You don't have room for all the songs in the world on your phone
and with this remote API, you don't need to have all of them. It does all the searching and processing and it's surprisingly quick. How can it possibly do that? I don't know, but I love
the interface. It's so fast. Ooh, that's another benefit of remote APIs, computational power. Because an API removes the
limitations of your local device, you can gain access to seemingly
infinite amounts of power. A good example of this is the
AR app of Google Translate. You can use the camera on your phone and in near real time it's
able to translate directly to your screen, like instantaneously. It's using a ton of processing power to make that magic happen
and that processing is happening elsewhere, "en la Nube." It took quite a bit of experimentation and some evolution of
ideas, but over time, we finally turned this remote
API dream into a reality. Now, I'm gonna drop some history
into the teacher's notes, but I just want you to
know that the struggle to achieve this concept of
remote APIs was very real. Now, most of the problem was that there wasn't a standard
that everyone loved. Things were pretty clunky for a while as these ideas were sussed
out, but then it happened. A new architectural style
appeared that was clear and allowed us developers to interact with specific resources over the web and it quite literally changed everything. This style rapidly emerged as a winner and just about everyone began offering and consuming external
APIs over the internet. Now, what I'm talking about here is REST, or representational state transfer. It was the approach that
we needed and honestly, it's the abstraction that
we developers deserved. Like we talked about already,
the popularity of REST spread so rapidly that it nearly
completely overtook the term API. It's like how we use the
word Xerox to mean photocopy, even though Xerox is just
a brand of photocopier. Xerox does other stuff too, I think. That's how pervasive REST is. REST is for sure not the end
all, be all of remote APIs. There are definitely some limitations which we'll discuss here in a bit. Technology's ever evolving and of course there's movements that are still advancing the concept of the best remote APIs. Some terms you might even
have heard, like GraphQL, more on this in the teacher's notes. Now, for the rest of this
course, we are going to do a deep dive into APIs that are
written using the REST style. When APIs embrace the style
and constraints of REST, they are said to be RESTful, cute, right? If you feel like you need a little rest, go ahead and pause me
before we do a deeper dive into what it means to be RESTful. Sorry, that was a bad and obvious joke, but as a developer you
kind of have to make it. You don't really have an option. Because REST sits on
top of web technologies like a really nice hat, we should probably do a whirlwind refresher
of how the web works. (upbeat music) It might have been a while since you thought about how the web works. There are a smattering
of terms that I'd like to reload into your working memory before we talk more about how REST uses them. So let's use the web, I've
got my computer here and on it is an internet browser,
the browser is a web client and I'm going to use it
to connect to a server. I'm going to do this by putting a location in the address bar, a universal resource
locator or URL to be exact. You might also hear this referred to by its superset term URI,
universal Resource Identifier. Now our URL here has a scheme portion and this one happens to be HTTP. HTTP stands for hypertext
transfer protocol. Let's break that down a bit. Let's grab that last part, protocol. A protocol is also often
likened to a contract. It's a little lower level than an API, but it's similar in concept. You can think of it as defining the expectations of how to communicate. Like an example that I think really sticks with me is if you've ever been to a rally and someone does one of those chants where they're like, "When I
say 'Fu,' you say "Bar." Fu, bar, one of those. Here, let's do one. When I say HTT, you say P, HTT, HTT. Oh, I just realized I might
have made you yell "P" out loud. Hope you aren't in a coffee shop. Awkward. Anyways, we, you and I just
set up a real quick protocol. I told you how to respond
to my specific request and you would've been breaking
or agreed upon protocol if you yelled anything
else but P, so the browser creates an HTTP request for
you, along with the URI, it also specifies a particular HTTP verb. In this case, it is using
the get verb, which is used to clarify that this request
will only receive data. That is, it won't be making any changes. The server receives the request that was transferred from the client. There's that second T. The server then does the
work that it needs to do. Finally, it generates
the resulting webpage and sends back a response to the client, my browser, in this case. The most important part of
the response is the body. For a webpage, that contains the HTML, hypertext markup language, which gives us the remaining
parts, the HT of our acronym. Hypertext is text that
can link to other texts. In HTML, we perform that
linking with anchor tags, so with that response, the
browser renders the page. When one of those links are clicked, they kick off a brand new HTTP get request and the process repeats
itself over and over. In between those clicks
though, the protocol's done, we've made the request,
we got the response. HTTP, as it was originally designed, is a stateless protocol. Once that request receives
a response, it's all done. If you wanna keep some sort of
state, your client will have to manage that itself and send
it up with each new request. Check out the notes for more on this. There are more http verbs,
also known as request methods besides get, most common
scenario you see is when you encounter a form that is used
to take information from you. Typically you'll see the
verb post used to explain that you are submitting or
posting data to the server. Okay, so our protocol
that's used to transfer this hypertext is admittedly a little more complex than our rally chant was. There's quite a bit of
important information in there that is included in the
request and the response. You've probably seen query
string parameters in URLs and you know the stuff
after the question mark? This is one way to pass
information about the request. Another common way this
information is passed around is through specific key and
value pairs called headers. Both requests and responses have headers and they're used to
help further communicate what is wanted as well as
what has been sent back. Some of the popular request
headers allow you to specify information about the
content that you expect back, like the language or the type of content. You can also state that you want the page if it has changed since a certain time. This technique allows for caching, which is a powerful concept. Why get the whole page if you already have it in your local cache? You can embed authentication information in each request using a header. In this way, you're essentially keeping your client logged in across requests. This response also contains headers. A super important one is the status code. This lets you know what
happened on the server side and can convey things
like missing documents. I'm sure you've seen the
old 404 or maybe the page has moved, but hopefully
everything is a 200 OK. It can also explain the content type, how large the data returned
is, and many more things. Okay, got it? Are you feeling good about
that little whirlwind tour? Remember, feel free to
make me repeat myself if that was too much, I totally get it. That was a lot of information. It's important to have
a basic understanding of these things because
REST sits on top of them. It uses the concepts that
were introduced with the web to expose resources that can
be accessed and manipulated. Let's take a look at
how the RESTful approach takes advantage of the web and its tooling for your benefit, profit. REST stands for
representational state transfer. APIs that meet the REST architectural style constraints are
considered to be RESTful. Now, a typical way to
teach about RESTful APIs is to cover the constraints
that define it all upfront. Now, I don't know about
you, but personally I find approaching learning that
way pretty overwhelming, especially from the beginning. I mean, we haven't even
looked at an API yet. On top of that, most of the REST APIs that you'll use will meet
all of these constraints. So here's the thing. I promise that we'll go
over all the constraints, but let's do it on our own time, like don't learn 'em
all right this instant. We could even make it a fun journey, like a RESTful constraint scavenger hunt, complete with prizes,
avoid where prohibited. Here are the guiding
architectural constraints required for an API to be considered RESTful. We'll check them off when we discuss them and then we'll loop back once
more at the end to review. Gotta collect them all, sound fun? Good. Let's get started talking
about how REST API sits on top of web technology, like a
little hat, much like the web, the client makes a request to a server. The client in this case is typically going to be your program and
you'll probably be using some sort of library to create
the request to the server. The protocol used, you guessed it, it's HTTP and it's stateless. The server won't remember anything about the particular client. If you wanna maintain state
like your login details, you must send it with
each and every request. You'll do this using
headers and just like that, we talked about two of
our REST constraints, client server architecture and stateless. You got two knocked off
already. You're on a roll. Now, we should probably talk about what that request was requesting, right? Well, it most certainly was requesting information about a resource. Now a resource is a little
abstract and that's intentional. It's the R in the URL or URI. We use the term resource
to reference an object. Also happens to be pretty abstract, right? And this is because we can use resources to describe just about
anything that we build. For instance, let's imagine
an e-book store website. On the homepage, there's a list
or collection of new books. Each of these books is a resource. We click in to take a closer
look at that book resource and we see a link to the author,
which is also a resource. We click into the author
resource and we see a collection of all the
other books they've written. Maybe we even see a group of fans, again, another collection, and each
of those fans are a resource. Clicking into a fan
resource, we see a collection of their favorite authors and books. Everything is a resource.
Let's change gears. How about an image sharing
application on your phone? So we have user resources
and those users post photos, which are resources, and
those photos can be loved. So there's a lover resource, maybe there's an album
that could be created. There's an album resource
that contains photos and albums have a collection
of contributor resources. Turns out almost everything
we ever want to build can be expressed in terms of
resources and collections. Most of what we want our
applications to be able to do to the resources can be
expressed through the unfortunate sounding acronym
CRUD, and that stands for creating, reading,
updating and deleting. Now, as a user of the e-book site, all we did was a bunch of
reading, no pun intended. I actually did intend that one. We were reading, right? Just getting information
to display it like we retrieved the author
page, we made a read request. The web browser used a get request to the specific author page. The RESTful API follows the same logic, your program sends a get request to a URI. Then the server responds with data and of course all the HTTP headers you've come to know and love. The body is typically represented these days as JSON or
JavaScript Object Notation. JSON provides a great way to
structure and nest your data. Every programming language
that I can think of provides some means of turning a JSON
string into a native object. The content type is
typically something that you can specify in your request
if JSON isn't your thing. If you recall, there are
other HTTP verbs available. These verbs are used in REST APIs to clearly state the
intention of your request. Wanna add an author? Host to the /authors
endpoint and send the data that you want to update in
the body of your request and these fields will be
defined for you somewhere. Wanna remove an author? Send a delete to that
specific author resource. Updates typically support the patch verb, and you'll see we're able
to represent our CRUD needs, the create, request, update
and delete using HTTP methods. Pretty cool, right? What this means is that
you can interact with any application out there
that's exposed their REST API. You could grab data,
remotely automate tasks, and even smoosh together
different services. This is called a mashup,
and here's the thing, there are a ton of APIs
available, just about anything that you can imagine, and
if they're truly RESTful, they'll all feel pretty much the same. You can build anything, there
are services that allow you to do incredible things with
just a few simple API calls. So now the question becomes
what are you gonna build? So why don't you take a quick
break and when you come back, let's explore a RESTful API together. We'll take a peek at how to use
the music streaming service, Spotify and their excellent RESTful API. (upbeat music) You have some newfound understanding of how web-based APIs work. I walked you quickly through some imaginary REST APIs and now I'm thinking it's time that we get
a little more specific. Why don't we go exploring together? Some of these REST APIs
allow you to give it a try from the comfort of your
very own web browser. One of my personal favorites that allows for exploration is the streaming
music service, Spotify. So here I am at spotify.com. Now, a quick word of warning,
it is going to look different. I guarantee you this site
is gonna look different because they're always
making things better for us, for us Spotify users, us lovers of music, and as well us developers. So I want you to try this. When you go to a site,
any site that you want to, you'll see here that this is really nice, Spotify's letting us kind of test out what it feels like in the web, on the webpage. But if I scroll down to the bottom, that's typically where
they hide nerdy stuff. Now, I knew this was
here, but if I didn't, I would look around for
something like this, this Developers, and I'm
going to click into here. Oh, I cannot tell you how good it feels as a developer to end up in
a place where it feels like you're being taken care of, right? This is so nice. The Spotify for Developers,
it looks like it was thoughtful and I can tell
you that it is very nice. It's a very nice tool. You can scroll down, you
can see all sorts of stuff. They give you some examples of what you might want to do, right? What could you build with this? So you could find out
like different things, like you could use the
API to see the beats and the sections and the bars. I think that there's a way to figure out if a song is danceable or not. So maybe I could import
dancing. We'll see. And if I scroll back up to the top here, you'll see that there's
these different headings. We've got this Discover,
I think this is great if you're going to explore
things, we have this Docs, you'll see that there's all
types of different, actually, APIs and SDKs, software
development kits, which are APIs, which allow you to do different things. You'll see that there's ones for iOS, there's ones for Android. What we're gonna be focusing
on is the one for the web APIs. So if I click into that, we'll get a nice overview of what this is. I'm gonna blow this up just a little bit. So you'll see based on some simple REST, representational state
transfer principles, that's what we're doing, that's
what we're going through. We're going through our scavenger hunt. We're going through that. There's a Spotify web
API that returns JSON, JavaScript Object Notation about music, artist, albums, and tracks, right? So that's awesome. That's great. So we can see all sorts
of different stuff. It opens up at this api.spotify.com is the specific URL and then it has a set of endpoints with each unique path, right? Each of those URLs that
we were looking at before, there is a way to get specific data. So you could do this
thing where you authorize. So, I could be a user, you could see what I recently listened to. I could have a playlist,
I could add to it. But in order to do that, you need to have authorization
to be able to do that. You don't wanna be able to just add to anybody's playlist, right? So there is some
authorization that's available and we are not gonna do anything
that requires that here. So if you keep on looking down here, you'll see that there's, it's based on those REST principles and you'll see that it does get to retrieve resources, right? And there's the post to
create resources, and again, resources here are songs
and artists and tracks. Maybe the resource you're
creating here is one of those playlists that we talked about. You can change using a put and a delete will delete the resource. So awesome, right? So it's
using REST like we saw. You'll see that Spotify
uses this URI style. So it's a Spotify track and then it has this unique ID, this Spotify ID. This will make more
sense as we dig into it a little bit more and then
you'll see that there's always this Spotify URL that allows
you to see what it was. And it will show you this as well. As we said, the responses come back and they are a JSON object
and we're gonna be looking here at a tool in the future called Curl, which you can use from your command line. That's what this dollar
sign here is talking about. I'll show you all this,
but basically it's saying that there's a lot of
artists that come back. You don't want all the
artists in it, it will come back paginated and of
course, you can use caching. We'll take a look at that here, you can see if the thing
has changed or not. So we'll take a look at that
and basically the response that comes back, if everything's good, it's gonna say a 200 or these,
these 200 level accounts. And then there's bad requests. So if you ask wrong or
maybe it wasn't found, that's the 404 or unauthorized,
if we try to do one of those playlists, we get an unauthorized and there's also if you're a developer, you never wanna see
this one, it's the 500. It means that you made an
error on the server side. We won't be doing any of those 'cause we're just gonna be hitting
somebody else's code. Cool, all right, so Spotify
offers the ability to, you can look at this and
you can build your own curl request, but one of
the really nice things that I love about their
API, and you'll find this happens often, if
we scroll back up here to the top, sorry if I'm
making you sick there, we're gonna jump in here to
what's known as the console. Over on the left are the
things that we can do with their API and one
of the things I wanna do first is I want to
search and you can see it's making a get to the search endpoint. So I'm gonna go into there
and what's really nice is it's set it up so that we can kind of build the query that we're looking for. So now we need to decide
what we're gonna do. I think probably the
first person that I would ever search for, the first
artist I would search for. And you can see that here it's showing the different values of what that is. I would probably search for Beyonce. I mean, right, wouldn't you? And I could choose, is
that a track or an artist? So the type there is important,
and if I type artist, you'll see that what's
happening is you'll see the curl here is changing,
it's changing the, it says the cue is the Beyonce. So that's one of the parameters that we're passing into the
API and artist is here. And you can see there's different things that we could do here. What's really important is that it needs to have this OAuth token. Now what's nice is we
can build one of those even if we don't have a Spotify account. So I'm gonna do that. I'm gonna click this Get Token, I am not currently logged
in and I actually don't have a Spotify account yet in this user. I do have a Spotify
account. I love Spotify. And this is asking,
basically what you would do is you would create a
specific OAuth token. If you were ever to use this API outside of where we're doing this right now, you would create one of these
tokens so that you could log in later and you say
what it is that you want. So here's the playlist, right? We don't, we're not gonna do
any of the playlist stuff, we're just gonna do a search. Maybe we'll look up some
of Beyonce's tunes, but, so I'm gonna go and I'm gonna
click this Request Token. So now it's asking me to either log in with my Spotify account, which I can, or I can create a new one,
and let's walk through that just in case you don't have
a Spotify account already. Let's create a new one. And this will be at my
developer account here. So I'm gonna put in my email. So my email, I don't know
if you know about this, but if you use Gmail you
can do a little plus sign and it will still send to
the left side of your Gmail. So I'm gonna do at Spotify
sign up and that way any emails I get from
here, it will have that. And it's kind of a way to let
you have multiple accounts. And I think, so again, my Gmail
is craigsdennis@gmail.com, but I'm gonna do SpotifySignup@gmail.com and it will go to my Gmail. It'll just kind of ignore
this, Gmail does that for you. It's pretty nice, right? So I'm gonna put in the
same password as my luggage, which is 1, 2, 3, 4, 5, 6, just kidding. And what should we call you? Oh, you know what? I love it when you call me Big Poppa, that will appear on my
profile, I am ready for it. And let's see, it is my
birthday on November 19th, 19. Let's see, what do I, I think, wouldn't it be nice if I was born in 1999? What is your gender? Oh, this is nice. How nice. This is like super inclusive. I love that this is so inclusive. It's like somebody at
Spotify went and talked to their people and listened
to what people wanted and they included people
who identify as non-binary or other, or prefer not to say. So like wherever you sit in
that I love and hats off to you Spotify for being inclusive,
'cause inclusivity matters. Share my registration data. Sure, why not? I am not a robot. I don't think I am. Oh, oh no. The images with bicycles.
That one's got a bike. That one's got a bike.
That one has a bike. Oh, what is that garbage there? Is that, this is a bike
lane. This is a bike. Okay, here we go, please.
Okay, I am not a robot. Thank you. All right, so
I'm gonna click Sign Up. Oh, I am male. I am male. So here we go. That's how I identify. All right, I'm gonna save that log in and I am going to log in with it. So here we go. All right. So it's asking me if I have
access to this developer console and it'll see my logged in
as Big Poppa, here we go. And now you'll notice here that there is this token here, right? This is this OAuth token that got created for me by Spotify and it's putting it into this console for me so it can share it. Now you never wanna let your token out. If you get a hold of, somebody gets a hold of your token, they can
do stuff on your behalf. And I realize that this is
on a screen being recorded and I'm going to get rid of
this token here in a bit. So you will not be able to have it. So I've got this token,
it's filled out here. I'm gonna click Try It and we're gonna do a search for Beyonce. Let's see what happens. So you will see that we
got some information back. So we got a list of artists, 'cause that's the type
that I searched for. And this is the search that we did. We'll see some external URLs and we think that this is probably her. I'm gonna see, I'm gonna
grab this really quick, but you can kind of see how
things are laid out here, right? So this is my Spotify URL for that. Let's see if this is
her, this looks like her. Yeah, yeah, definitely. So, great. "Crazy in Love," "Cuff It."
I haven't heard that one yet. Awesome. So this is Beyonce, great. So we got her, we found
her, we used this search. It has, shows how many followers she has. Wow. 32 million. Good job. And it tells the the genre. So we can do all sorts of
really cool stuff with this. And it's here, you'll see
that I'm getting a URL, I'm getting a link that will open up her specific artist page, right? So, here is her ID. So if I take her ID,
I'm gonna grab this ID and I'm gonna come over
here to Artists and I can come in here and I can show
all of the artist's albums. So you'll see it'll be artists/ID/albums. Let's see all of the albums that she did. But let's look at that in JSON format. So the artist that I want,
I'm just gonna pipe that ID in there from before, right, now
it still has my bearer token. The console has done that
for me and I can go ahead and do Try It and we should see that now, it's gonna return back albums, right? So we've made a get request to
the albums and I can see all of the albums that she's
had here and we can see where they're available in
different markets as well. Looks like she's available in lots of markets all over the world. Who runs the world? All
right, so here we go. We are going to look, let's
see, these are albums. That's the artist there.
That's the type of the artist. Let's get one of the albums here, let's make sure that we got it. So you see that it's got
different things like I could get access to maybe the
image of what this album is. So let's do that, I'm
gonna post that here, open that up and let's see, there she is on her horse, her magical horse there. So that's pretty cool,
right? This is awesome. I can get access to all
sorts of information about an artist I can get by their ID. I can go and find all
sorts of different things that I wanted to do, right? So, if I knew an album
too, once I have the ID, I could get the ID, I
could get the tracks, all sorts of amazing things. And then there's these playlists, right? So you can add a playlist, if I wanted to, I could post to create a playlist. Now of course I need to
authenticate to do that and that's a little bit
of what we're doing here, but I could add, put together a playlist for everybody to do using this API. And again, when we are
looking at the artists, when when we're looking
at this get artist, it's showing this curl command and we're gonna take a
look at that here in a bit. But I just want to take
a little bit of time. I want you to go and take a look, go back to this Discover section and kind of get inspired by
what's available, right? So you can look at, there's
these different things where you can, I was right, you can check and see if there's danceability of a song. You can go and find a
track and is it danceable and you know that Beyonce's
is, the songs are gonna come back very high in the
danceability thing there. But lots of powerful
things and there's lots of cool examples that
you can do that people have already gone and built. And you can take a look
at how they built it and how they use the API recommendations. This is awesome, really
this is like super wide open to you and you can do all of this because of the APIs that they provide. Pretty cool, right? You can get access to all
of Spotify's music library and you can build tools
that extend their platform. I highly recommend that
you go and take a look at what other people have
built using these APIs. It's super impressive. Did you notice how fast
those results came back? How could it do that search so quick? Oh wait a second, does it even need to? Those results don't change all the time. It's not like Beyonce is
dropping a new song every minute, though I wish she would. Those results are definitely
cacheable, ding, ding ding. Cacheability is also
available on the client and we'll get to that here in a bit. But this is a great example
of a layered system. I'm almost positive that Spotify has set up things so that
it returns the same JSON from its own server
side caching mechanism. It's not rendered that
on every single request. As a user of the API, I don't know how it's doing that and frankly, I don't care. I want it to be available and fast when I hit that specific URL. Beyonce definitely appreciates how fast the results will return. She might even take that
API dev to Red Lobster. Let's go ahead and take a
quick break, during this break, I'd love for you to move
around and think about what you might be able to
build with that Spotify API. For instance, while I was using this API, I had this idea pop up. When I'm at a music festival,
I often have a hard time deciding which band I should
go see, there's so many. Now I would love to have an app suggest to me which of the bands that are currently playing I
would most likely enjoy. You know, based on my listening habits, I'm pretty sure that you
could build that just with the Spotify API and using a list of events of the bands
that are performing. And if you do end up building that, share it with me 'cause I need it. What other interests do you have that provide an API that you can use? Check the notes for more ideas. Now, after you come back from your break, let's dive a little deeper and make use of an API using our own
tools, see you soon. No really, take a quick break. Seriously, it'll do you good. No binging. (upbeat music) While I realized that exploring an API on a website is informative, it might not feel like you're
actually using that API. I think the next logical step in exploring is actually making that request yourself from your computer, not from a website. Now as I pointed out in the Spotify docs, there were examples that were
using a command called Curl. Curl is an open source tool
that is used to send data back and forth and it runs
locally on your computer and it's awesome for
poking around at APIs. What do you say we explore it a bit? Okay, so we are back
here on our Spotify page and we see that there is a
command here that says Curl. Curl is a command that we
can run from our terminal. Now if both of those terms are new to you, command and terminal, this
is a great time to head over to the notes and learn
about what the terminal is. So my operating system is a Mac and it has an application
on it called Terminal. So I'm gonna open that
up, Terminal, and in fact, I'm gonna make this a little bit bigger. Let's go ahead, let's let
it take up the whole screen, we're gonna be in here for a little bit. So I'm gonna type Clear
and clear my window. All right, so this terminal allows me to perform
actions on my computer. Like I can make it do text to speech. I can do Say and I can say, "Hi mom." - Hi mom.
- And it says, "Hi mom." And the Windows operating
system has a terminal as well. And while it's a little bit different, they're actually pretty quite similar. But check the notes for more on this. So what happens is I write the command and then I pass in
values for the parameter. In this case, it's "Hi mom." Now, note that I used
quotes there because I wanna pass one value, even
though there is a space, if there was a space, that's
kinda how you separate things. But with the quotes it's saying this is one value that I'm passing in. We developers spend a lot
of time in our terminals, so if this is new to you,
I want you to remember that it was new to everyone at one time. So please take your
time and don't let this get you too frustrated, you've got this. So I already have Curl installed. I'm gonna just go ahead
and make sure that I do by typing the word
"curl," and if I see this, I could see that I could type curl and then the command "--help." Now if I didn't have this installed, if this came back with like, I don't know what you're talking
about when you type curl, the word curl, that's okay. So we're gonna head over to the notes and you'll get sorted there. But the starting point, where
I want you to go is curl.se. So you'll come to this page, you'll see this as a command line tool in library for transferring
data since 1998. And that logo sure feels
like that, doesn't it? It does all sorts of things. What we're really concerned
about is this HTTP, right? We're going to use this from the command line to get access to a URL. So if you don't have curl
on your command line, go ahead and pause me and
check out the notes for the best way to get this
installed on your computer. There's a lot of different ways to do it. If you come here under Download, you'll see that there's
different operating systems. So you've got your Linux
and you've got your Mac OS. And if you come down here,
you've got your Windows. So there's different ways
of getting things installed. So go ahead, take your
time, get that installed. And when you come back,
I want you to try this. I want you to do this thing with me. So I'm gonna go back to my terminal and I'm gonna make sure that it works. The way that I always
like to test is I like to go to icanhazdadjoke.com. How do you get a baby
alien to sleep? You rocket. Oh, so good. Anyway,
that's how you do that. That'll let you go and
it's gonna hit that website and it's gonna give you back
a joke when you're ready. So now that we've got
our curl up and running, we've got our successful dad joke, let's go ahead and run
that command from Spotify. So I'm gonna come back
over to my Spotify thing where I was running the search. I'm gonna make sure
that it's still working actually before I get
started, 'cause these tokens can expire and depending
how long your break was, it might have expired,
but mine is still working. So I got this back here and I should be able to get this from my command line. And what I'm gonna do is
I'm going to copy this, I'm gonna highlight this. This is a development practice known by US developers known as copy pasta. So I'm going to copy this and I am going to go back to my terminal and I'm going to paste and this long
list of things here, what this is doing is just saying, hey, I wanna make a get request to
the api.spotify.com/v1/search. Remember, that's where we were at. We were searching and we're
passing the query string of Beyonce and the type of artist and we're telling it, "Hey, I would like to get back JSON and I
am sending you JSON," even though we're not
actually sending JSON. The default has that there
and this is an important one. This is sending you a header, right? The "-H" is a header and authorization. And this is that long
token that we had there. Now if all is working, when I press Enter, I should get here locally
on my machine that same list of data that we did and
I did, check that out. So what I'm gonna do
is I'm gonna come back up here and I am going to grab, wow, there's a lot of information here, right? When this comes back,
I'm gonna grab her ID. And so I remember that
when we were looking at it, it was down in here, this
ID, is this the right one? Is that the first one? So we got items, no, this is
her ID here, this is her ID. It starts with a six, VW. So I'm gonna copy that
and I'm gonna use that. I'm gonna go back and
remember I'm gonna go and I'm gonna look, I wanna
see what albums she has. So I'm gonna come into here
and I'm gonna remember, I'm gonna paste this URL
here, and I'm gonna run this, make sure that that's still working. I'd like you to go ahead and pause me. I think I'd like to see can you get her albums locally on your machine? Can you go ahead and make sure that you can do the same Get Artist, see all of Beyonce's albums
on your local machine? So here's what we'll do, you give it a try and if you, once you
get it printing locally on your machine, you
can let me know and then unpause me and I'll show
you how I did it, okay? Are you ready? You got this. Pause me.
(upbeat music) Cool. So how'd you do? So here's probably one way that you could have done it is just copied that, right? Copy this whole thing and pasted it. But what I wanna show you
is that we have access to, we know what these URLs are, right? So we know that there's
this v1 artist and in fact, we can see that there
is a get of /v1/artist. And then you can actually pass their ID in the URL there, right? That's what this ID is here.
So, let's just go back. I'm gonna show you a little trick too. So, I've got her ID copied
still, so I could have just, just ran that query and copied
the curl and pasted it here. And if you did that, you did it right. I just wanna show you a little bit more of what else, how else we could explore. So I'm gonna press the up arrow and you'll see my cursor's moving here. I'm gonna press the Option key on Mac. I think you're gonna press
the Alt key on Windows. You can jump around like
this and I'm going to get rid of what's here, and I'm
gonna say v1 artists, right? So that's the collection of artists. And I have that specific ID, right? So there's the ID and I'm
gonna press Enter here and you'll see that I got back
Beyonce, which is awesome. That's what I did and then
remember, the artists have, I'm gonna go to the front of the line, it's Control+A on Mac,
and I'm gonna switch this so artists have, this is
specific artists, so Beyonce, and we wanna see Beyonce's slash albums, which is what the console
would've generated for you. But I just wanted to show
you that you can kind of navigate and move through
and you'll see that there's a bunch of different information
that comes through here. It's kind of hard to see, right? So, kind of hard to parse. And this is something
optionally that you can do. So I press the up arrow
and I'm going to press, pipe that into a tool
called JQ and you'll see that it comes back very
nice and pretty, right? So this is something that is very nice to have and I piped that. That's this, the symbol
above the Enter key is this pipe symbol and it allows
you to take whatever happened in this first part of the
command and take its results and put it in this part of the
command, which is super cool. And again, this is in the notes. You don't need to, you don't
need to worry about this, but I know that I can query things. So I can say that of the items, I'm only interested in the name, the .name from each one of the items. And this is a little query language that's attached to this JQ program. You don't need to do this,
this is just something, if you're doing it from the command line, it's something that we do that
we could kind of hack around with a little bit and
you'll see I can get all the lists of her albums and
that's pretty cool, right? That's powerful, and if
you are gonna just start poking around and moving
around with the URLs, one thing I wanted to make
sure that you're cautious of is if we come back
and we take a look at the console page here, they
do a nice trick for you. If we're back here in search,
like one of the things that I wanna make sure I know
that Beyonce has this song that's like something like,
who runs the world, right? Who runs the world? Girls. But I don't remember
where, what album it's on. So I'm gonna search for a type track. Now, note that my query has spaces here. Now what's happened here is
it's done this URL encoding. So like if you were trying
to mess around and work with the search, you'd wanna
make sure that whatever you did, you passed that
with those plus signs there. So I'm gonna run that curl command and we'll see who runs the world, girls. And I am going to, I see
there's this open link here. So I'm gonna go ahead,
I'm gonna open that. Let's take a look and make
sure this is the right track. I'm pretty sure it is, it
is not the right track. What is this? Femme phan? Maybe it's some other, some others. So let's take a look.
Well, that's interesting. So, oh, I just went to the bottom instead of going to the top. So I should have went to the
very top of these results or I should have pulled,
probably pulled the name out. Rock-a-bye, baby. There's a
Rock-a-bye baby version of this. Whoop, okay, so when the color stops, hope you're not getting
sick of all this scrolling. So Beyonce is the artist that we want. So this is the one, we
want to hear this song. Let's see if I got the
right one this time. This is just something, you know, there's a lot of data coming back here. It's kind of hard to do,
to use on the command line. Sometimes I'm a little
cutsy like you just saw. Here we go. Let's see what happens. Let's make sure this is it. There it is. There's Beyonce. Not the song I was looking for. Oh yeah, it is, "Who
Runs the World? Girls." And now I can listen to that. So it's like, who runs the world? Girls. It's kinda like who
runs the terminal? Curl. Boy, that was a big setup
just to make that joke. I hope that you enjoyed
it. You can has dad joke. Curl is an awesome way to
explore APIs and you'll find that often, just like we saw with Spotify, APIs will use Curl in their
docs to show you how they work. Spotify is just one API and there are so many companies and services out there. In fact, some APIs are the product. Like that's what the company's
selling to us developers. So now that we've been
building up those muscles, why don't we take a swing at another API? Let's use a different API,
this time let's use Twilio. Twilio is a company that loves APIs. In fact, that's what
the company started as more than a decade ago,
just a set of APIs. It started as abstracting
away communication channels. And by that I mean any way you'd ever possibly want to
communicate with your users. Wanna send a text message?
There's an API call for that. Wanna make a phone call? There's an API. Send an email, a WhatsApp message, literally whichever way
you want to communicate, there's an API for all of them. Developers embed these
APIs into their apps and I'm pretty sure that you've probably used it without even knowing you were. Now, nowadays there's a
whole suite of products that Twilio offers that they
saw their customers needing. But under the covers it's still these APIs that are powering everything. I need to be a little
upfront here with you. I love Twilio, I mean, I love it so much, I even applied for a job
with them and I got it. But even if they didn't hire me, I know that I'd still show off
how powerful their APIs are. I mean, with a single command,
you can send a text message. I remember when I first
did that, I was like, whoa. Like that level of abstraction is amazing. I mean if you've never
thought about it before, what even is a text message? I mean, I know I have an
app on my phone and I can use it to communicate with
literally anyone else. But how does that work? Like there's all those different cell carriers and standards
and phone numbers. I mean, I have no idea. And with Twilio, I don't need to know. That's the beauty of this API. It just works here, let me show you. All right, so here we are
at twilio.com and again, word of warning, this is going to look completely different from my
right now to your right now. So please make sure that you
check the notes for anything that might have changed
and is specifically about this flow that we're
about ready to do 'cause we're going to sign up
for a trial account. So I'm gonna click the Sign Up button here and this is going to look
completely different. I know because our team is
constantly making this better. But the one thing that I
wanna make sure that you know right now is that you see that there is no credit card required and it
is a free Twilio account. So I'm gonna put my information in here and I'm gonna use the same
trick that I used before where I do plus and I'm gonna
say, "APIcourseV2@gmail.com." So, the plus sign there
again, the little Gmail trick, we're gonna go ahead, I'm
gonna put in my password again. 1, 2, 3, 4, 5, 6, my luggage. How many times can I do that joke? And then I gonna do this accept, must be 16 or more characters. Okay, there's some password
requirements over there. I think that's 16. All right, here we go. Starting my free trial. I'm ready. Let's do this. I'm definitely gonna
save that long password 'cause I need that for later. All right, so I have now
should have been sent an email. So let me make sure that I
got that email and I did, I am going to click the link
to verify it and here we go. I'm gonna verify my phone number to verify I'm a human 'cause all humans have phones. So we're gonna do (432)-527-4274. Please don't call too late. I'm gonna try that.
I'm gonna click Verify. All right, so I got my verification code. Hey that came very quickly. Well that's wonderful, my
verification code is 017869. Hopefully your code's different than that. Wouldn't they be funny if
they were all the same? All right, so here we go. So which product are we here
to use? We're gonna use SMS. We're gonna use the SMS messaging product and what do we plan to build? Let's see the, of course, these questions are gonna be different. What are we gonna do? We're gonna build, what?
Build something else. We're gonna build something else, how do we wanna build with
Twilio, with code, right? So we are gonna end up
writing code if we want to with minimal code on top of
code samples or no code at all. So, definitely don't need
code to build over here but I'm gonna say with code
'cause we're developers here. So what is your preferred coding language? We're gonna do JavaScript
even if it's not, we're gonna be doing JavaScript
for the rest of this course and I do want to host my code
on Twilio, which is nice. There's a nice serverless option. These options, like I said
are totally going to change. Just try to answer them
as truthfully as you can. So, and my building country is
United States, which is true. And I'm gonna get started. I'm
gonna go ahead and walk this. I guess let's go ahead and so
we'll I can explore products. There's way more products that are available than you can see here. This is what got built based on the menu of what they thought,
but if I ever want to, I can come to this Explore
Products and get more, we probably won't need to do that 'cause we filled out what we're gonna do. And this is where you can
get access to your logs. I'll show that off here in a bit. If there's any problems you'll
be able to find them there. Manage your account keys and build trust with your customers. Yeah, we can build all sorts
of different things in here. We probably won't need to do too much here 'cause most of the keys
that we have are available to us right from this page
that we're on actually. So we'll keep going and I can
see the billing and again, you're in a trial account and I think you get something like $15 to try with. So we'll be sending a text
messages using that trial. Dollar dollar bills,
y'all. So, here we go. And then you can switch between products. So you can have multiple accounts, right? So if you wanted to come and
like explore a little bit, do your own personal thing, maybe do something for
work later, up to you. There's a 1550 is what we got. All right. So, and then I'll click
Next and then I can, anytime I want to, I can look
at this tour again to help navigate around, which is
really nice, beautiful console. So we could definitely go
ahead and the first thing that we wanna do is we want
to get a Twilio phone number. So I'm gonna do that. I'm gonna click this,
Get Twilio Phone Number. And I am so glad that this happened to me. It says that this account
has been restricted from provisioning new phone numbers, which means that thinks
that I might be spam. And you know why it is, it's because I put that Gmail account with a
little plus thing there. So if this happens to
you, I don't want you to feel offended or anything like that. I want you to check the notes for the latest ways to get around this. And also I'm going to go
right now and I'm going to email compliancereview@twilio.com and I should get that up and running. If this happens to you,
go ahead, press Pause, check the notes here for what to do. And I'm going to actually do that. I'm gonna press Pause here. I'm gonna get my account
able to get a phone number and I will see you back
here in one second. All right, so I got all sorted out. So I sent my email to the compliance folks and I was able to say that I was doing a personal account and
I'm learning how to use these APIs and they were
able to let me get in here. So what I'm gonna do
now is when I click this Get a Twilio Phone Number,
we're not going to see that message 'cause I'm
coming in and I've got a new phone number and it automatically gave me this one, this one here, this 561. It went away really
quick, but it's down here. This is my Twilio phone
number, this (561) 816-5433. Now this number is mine, which is awesome. I can use this message,
I can send messages, I can receive messages, I can do all sorts of things with this. I can make calls, I can receive calls. This Twilio phone number
is mine to play with. I think we should do just that. We should send a text message. Now before we get started, I wanna make sure that
you know this stuff, you are on a trial account. So there are some limitations. You can only send messages and make calls to verified phone numbers. So when we set things up, we've verified, like I'm able to send a text to myself because I verified my phone number. I mean, and it will say, "Sent from my Twilio account," beforehand. And there's more things
about your trial account too if you wanted it to get into that. So, check the notes because
this very well could have changed, but check
the notes for more on this. So let's do it. Let's send a
short message service, an SMS. So I'm gonna click here
on this Docs and Support and I'm gonna click
this, it's gonna open up, I'm gonna go these developer
docs, these developer docs are some of the best that
are available out there. I want you to see these. So we're gonna come in here under SMS 'cause that's what we're doing, right? Short message service, and
under here, under these, these sides on the docs
here, you can collapse these. So I'm gonna come in
here under API reference. I'm gonna go to this message resource. Now this is an API, right? So we're in the API reference. So the API that we want
to do is we wanna be able to send from, and we wanna
say from the phone number that we just got and we wanna send a message to my phone number, right? So we're gonna do that and you'll see that over here on the right, there are things that you can do that
show you what you can do. So with this message we can
do all these different things. We'll start with creative message, we'll create a message first. So we're gonna go into
this, create a message and there's these
different languages here. So we have no JS and you can see the style that it looks like, we'll take a look at something like this here real shortly. This is a helper library
that wraps around the API. So you don't need to
do the sorts of things that we're about ready to have to do. You can do things a
little bit more cleanly. But what we're gonna
look at is Curl, right? So here's our friend, Curl. We're gonna jump over here to
Curl and the docs have this really nice thing where I'm
able to actually copy this. So I'm gonna click to copy this and I'm gonna pop over to my terminal. Now again, I'm running on a Mac. So there's a couple of things
here that this is assuming that it's going to be okay
because I am running on a Mac. It's going to assume that these slashes, see these slashes at the end
here, these on a Mac terminal, these show that we are in the new, we're making a new line available here. And also you'll see that there's these account SIDs and these Auth tokens. This dollar sign Twilio
Auth token, dollar sign, Twilio Account SID, in my terminal, on my Mac, that is what's known as an environment variable and they've been set. Now I don't have those set currently because I just built this account. So what I'm gonna do is kind
of bad practice actually, I'm gonna actually put my real information here for us to use. So, back here on our console, on our Twilio console you'll
see that I have this thing here called this account SID
or String Identifier. So this is my ID, my unique ID for the
account that I just created. So I'm gonna go ahead and I'm
gonna click this Copy button. So I copied that, I'm gonna come back here and I'm gonna move my mouse and I'm gonna remove right here where
it says account SID. So that's string identifier.
I'm going to paste this. So that is the way that Twilio
is identifying who I am. I'm gonna go backwards
through the rest of these. And so if you're watching here on Windows, let's just go ahead,
let's get rid of these, these new lines here. So I'm gonna just put
them all on one line, we can handle that, we'll do that. So I'm gonna get rid of
that line and that way it will work completely on both Windows and Mac for what we're trying to do. So I still have my account SID here, so I'm gonna keep on backing up here and I'm going to get rid
of that line, there we go. And you'll see one more time here, there's the Twilio account SID, that string identifier for
my account was still present. So I'm gonna paste that there. So now the API call that I'm doing is to that specific account,
it's due to this messages and you'll note that it's
doing, now it's doing a post. So because we're creating
something new, right? So we're using post to create a message and you'll see here
that it says from equals and the number actually there
for the from, we want that to be the Twilio number
that we just got, right? So that new one that we just got, we're gonna say that is
sent from, let me go back, I'm gonna copy my Twilio
phone number, right? So I've got my 561 number there and I'm gonna paste that here. So you know from and this
plus 561, that's a US number. So it's got the, it's called
a 10 digit long code, 10 DLC. So it's (561)-816-5433 is the
number that I just bought. And we're gonna say by
default it said, "Hi there," the body of the message, right? So we're, instead of that,
whatever we're gonna do and note that this is all in quotes and we're gonna say, "Ahoy world." I don't know if you know this
or not, but the first word, the way that we used to
answer the phone was we'd say the phone would ring and
you'd be like, "Ahoy?" And the other side would go, "Ahoy-hoy." So we like to do that here a lot, at Twilio we say "Ahoy world." It's kinda like the hello world of this. So the body of the message,
the text that we're going to get is gonna say "Ahoy
world" and then we're gonna send it, I'm gonna send
it to my phone number. So this is one of those
numbers that you verified right when you created your account, you verified that you had a number. So my phone number is (432)-527-4274. Don't text too late at
night please, and then the final thing that we have
here is this Auth token. Now this is a very private key, right? We don't ever want anybody to have access. This is like that Spotify
token that we had, right? We don't ever want anybody to have it. I am going to, I trust
you and I'm gonna go ahead and I'm gonna paste that
here so that we have it. So that is something that you never wanna let out 'cause now you could seeing this on my screen, you could use this, right? And you probably don't
want anybody doing that. So you never wanna actually
give that number out. You wanna hide that and we'll talk about how to do that
more here in the future. But right now I just wanted to show you, we're gonna use Curl,
we are going to create, we're gonna send a post to this URL here and you'll notice that ends in JSON. So that's what we're gonna get back. That's the way that it works. This is to my account, my account SID, you see it starts with this AC and we're gonna post using
this data URL encode. So the way that the Twilio
API works is it takes some parameters, it takes from body and to and the way that you pass those in curl is with this --data URL encode and you pass what it is that you want
to have go across here. So we're gonna, if all of this works, I should get a message back. I should get a text message on my actual phone that says "Ahoy world." Let's do it, and it looks like I'm
missing a quote someplace. So where is the quote that I'm missing? I don't see a missing quote. I can go press the up arrow,
maybe it will show up. Yeah. Oh, right. You know how many times I do that? The ahoy world, the exclamation point is something that you
need to typically escape. So I'm just gonna say "Ahoy world" with a single quote there. So, if you're having that problem, sorry, that's what that was. So I pressed the up arrow to
get my information back there and now if all is going
well and I press Send, we should get a text, here we go. And so I got this message back, I got this and sure enough, here it is, I got it. And you can see here it says
at the front of the body that it says it says, "Sent
from your Twilio trial account," which is fine, we're in a trial account, that's totally fine, but I
did and boom, I got it on my actual phone, I got that
message, which is awesome. We now have the ability to send a text message from the command line, right? That's pretty cool. Let's take this a step farther actually. So we know that that
API, when I did a post, I was able to get information back. I'm gonna go ahead now and I'm
gonna do just bring that back and I'm gonna get rid of all
of these parameters here. I'm gonna get rid of the
from, the body, and the to and I'm gonna change, I'm gonna make that, I'm gonna do a get and let me
show you what that looks like. So I'm gonna get rid of
all of those parameters, I'm gonna keep that same
URL and it still has my account SID there, right in
there and instead of a post, what we're gonna do is
we're gonna do a get, what we should do is we should get back all of the messages that are there. So I'm gonna hit this kinda
like a message log, right? So these are all the
messages that have been sent, which is awesome, here it is, sent from your Twilio trial account. So, and actually I can make this look a little bit prettier
like we saw with JQ again, totally optional in the
notes if you want it. Yeah, there we go. So you can see that I've
got some information that's sent back here and
you can see that the message that was sent in was sent
outbound to my phone number to me from that number,
which is awesome, right? And like I said, curl's
a little bit challenging because it's gonna be
a little bit different if you're in Microsoft
Windows or if you're in Mac. I tried to make that as
comfortable as possible but I you saw that I did
run into a couple of things like I couldn't use the exclamation point and things like that and
it's a little clumsy. So stay tuned 'cause there are
more tools coming your way. Awesome job getting that
running from your local machine. It feels pretty good doesn't it? What a cool skill you have now,
you can send a text message from your machine with
just a single command. Now believe me, this is just the tip of the iceberg of what you can do. There are so many more
Twilio APIs available and now I know that you
can explore them with Curl. For now though, let's take
things another step deeper. Now I don't know about you
but I'm a little clumsy when it comes to long
commands on the terminal like we just did with Curl. When exploring APIs, I really
like to lean on visual tools. If you don't mind, I'd love
to show you some, that is, of course, right after
you take a quick break. (upbeat music) There are a few tools that I
rely upon when it's time for me to explore new APIs and I
thought I'd share 'em with you. I used these to dive in and get my hands dirty and organize my learnings. One of the most famous
tools and one that you've probably already heard
of is called "Postman." Do you get it? Postman. In addition to being a pretty good pun, it's also a powerhouse of features. Postman started as a Chrome
extension that let you make API calls and what
it's turned into is a powerful enterprise ready
tool with all sorts of bells and whistles and even
shareable collections for the most popular
APIs that are out there. It's jam-packed full of features and in my humble opinion,
you probably don't need all that just yet in
your learning journey. There are entire courses on
how to properly wield its power and I've linked to a few
of those in the notes. There are other tools
popping up all the time that allow you to explore
APIs and store your notes. I like to think of these apps as the built in the vein of postman. There's a whole genre of video games that gets dubbed Metroidvania, because they're similar to
"Metroid" and "Castlevania." Now these apps are
Postmanvania, Postman-esque. Let me show you an example. I just bought this lamp here, it's rad, it's from Govee and it's got this app that I can use to control it on my phone. I can change the colors, right, and I can even make it
dance to my beatbox. (Craig beatboxing) It also has an API. These are the docs here and
as I explore these docs, I'm gonna save them in one
of these postman esque tools that I've been using
lately called REST Fox. Like here I can see all of the devices that are associated with my Govee account. And I set that up using
this URL here and you'll see that it is a get request
and I pressed Send and it sent the request and I got back the Govee devices that are
associated with my account. This API requires a header
and it's called Govee API key. And you'll see these double
mustaches here that I'm using, this side little mustache thing. This is getting things
from my environment, it's a special key that I
don't want anybody to see. I'll show you more of those here in a bit. Now notice how this is a get, so I can send the request
and you'll see that here's my response and I can also
get the current state. So I have a different call here. I can get the current state
end note that if I click Send here we can see that this is
the color of my light currently and I can also turn it on
or turn it off and I can turn it on and I can also
change the color, right? So I'm gonna turn this to red. You don't have to turn
the red light on, Roxanne. Pretty cool, right? And I have this here
for me whenever I want to tweak things, when I
want to come back later and when I want to use it in my code. Did you just have a light bulb moment? I quite literally just did. Let's see if we can't build one of these for the Twilio APIs. So if you'd like to
get REST Fox installed, please check the notes. This is an open source tool and it's getting better every day. Now if you love it too, I highly suggest that you star it. If you click up here,
you could go and you can actually check out the
GitHub repo and you could see cute little Fox here
and you'll see over here how it's tagged that, oh
it's tagged REST client. I guess maybe that's a little bit better than my Metroidvania analogy. Maybe REST client's a good thing. API client, that's also a good thing. So there's lots of these
tools that are available. But let's start using this one. So I've got REST Fox
running here and you'll see I've got the Govee folder,
which I can collapse. And typically what I do is group these by the API that I'm exploring. So let's keep poking around
a little bit with Twilio. So what I'll do is I'll make
a new folder called Twilio. So I'm gonna right click over here and make a new folder called Twilio. And now in here we'll
create a new request. So I right clicked New Request and I'd love to explore
more of the SMS API. So let's see, oh you know what? This new number that we just bought, this Twilio number that we bought, not only can it send messages,
but it can also receive them. So we could send it a
message. So let's do that. So let's go ahead and send
a text to your number. Now if you forgot your number,
it's over in your console. So if you come to your
console and you scroll down a little bit here, you'll
see My Twilio Number. So go ahead and send
a text to your number. Now my number, I'm gonna send a number. It's (561)-816-5433.
I'm gonna send it, "Yo." And there we go, it went
and I ended up getting a default message back
and we could change this, we could make, we could
program this to do whatever, but I'll show that off later, but for now, I just want you to know that
we created a new message by sending to this API and
we can actually get it. And you can also find your phone number later here under this phone numbers. If you go to Phone Numbers,
Manage Active Numbers, you can see your phone
number and remember outside of trial mode you could
buy multiple numbers. So that's an important thing to know here. So, all right, so we are going to look at the incoming messages. So we should do that, we should call the request
what it's going to be. We'll call this incoming message log. That sounds good. And we'll click Create. Okay, so let's head over to the docs and see how we might do this with, so back in the docs here
on the message resource, remember this is where we
did the create a message. I'm gonna see if there's
something else down in here. Ah, list all messages. That's a good one. But we don't want all of the messages, we actually want to
filter it a little bit. So look here, we can do this
by matching filter criteria. That's great. So we're in here, I'm
under the curl tab, right? I could be in these different ones, but this is the example that we want here. I'm gonna grab this URL,
you're gonna see all of this. So that's how they're filtering it. There's some stuff here at the end. I'm gonna grab all of this
and I'm gonna copy it. I'm gonna come back over and I am going to paste it here in
this Enter Request URL. I'm gonna paste the whole thing there. And it was a get request
and the URL had some stuff in this query string that came afterwards. And a query string is, you know, defined by this question mark. So we don't want this date
sent, let's get rid of this. And what's next? We don't
want from, right, we don't. We wanna look at all the numbers that were was sent to, right? So this is the to here, is what we want. Now this 2B here just
happens to be a percent 2B URL encode and happens to be a plus. And I know that and I just happen to know that without having to Google
it but that's a little rough to know like how do I
make a plus sign in here? Wouldn't it be nice if this tool just did all of this URL encoding for us? Like we didn't need to
make this mess at the end? Well check this out.
Here's query right here. This is what we want. So
we wanna add this query. We don't want to have this
whole stuff at the end here. We wanna put in to, we're gonna add one of those things there. We'll put in a to. So that's gonna append
that query string for me. And I'm gonna put in, to my phone number, which again my Twilio phone number, which is over here in my logs right here. Actually I can, I'm
gonna grab this number. This is my Twilio number. I'm gonna put it in the format that is wanted there in my
REST Fox, here we go. So I'm gonna fix that and
we're gonna get rid of this. Just wanna make sure
that's 1561, there we go. Got rid of all those. All right. Now also remember that this was accounts and then it had account SID, right? So that's the ID for my account. And then it's under messages. There's a collection called Messages underneath this account SID. But what we want here is we want, that was using an environment
variable from Curl, but this is also known as
a path variable, right? A path parameter, so here, down here we have this path parameters. So the way that these work actually to replace them is if we go like this, if I get rid of this and I put a colon, what's gonna happen is we
can, anything that's down here in this path parameter
will replace what's here. So let's do that. Let's add this item. And again, that is Twilio account SID. So that's the name of the
variable that's up here, right? It's colon, Twilio account SID,
that was just what's there. Let's keep it 'cause that's what it is. And then we're gonna put
our account SID there. So that also is on my console. So I'm gonna flip back to my console. And on the main page here, if you come in, you can come down and you
can grab your account SID. So now I have my account SID, and I'm gonna paste that there. Awesome, and I think we're ready. I'm gonna press Send
an, oh, we got an error. We got a 401 unauthorized,
no credentials provided. Oh that's right. Of
course, we want to log in. We don't want anyone just being
able to see these messages. So we wanna make sure that we have some authentication happening. So I'm gonna head over to the Auth tab. You'll see that if I
slide this back and forth, I don't know how much
screen real estate you have, but you can slide these
kind of around as need be. So I can, I'm gonna
pull this and you'll see that when I do my little
menu here collapses. So I'm gonna choose Auth from here, but that is also available
in the header here, right? So like it's just a different view of it. All right, so in the Auth I'm gonna put in a basic Auth and I'm
gonna put in a username, which is my username and
then I'm also going to put in my password, which is
my Auth token over here. And again, this is very private and you would never ever want to do this. You now know my Auth token.
I don't want you to have that because you could do exactly anything you wanted to to my account
now that we're there, and one of the things
that you could do is see the messages that were sent in and look, there's my "Yo," my "Yo"
message has made it in, awesome. So also I wanted to show you
the request that happened. Let's take a look at that. You can see that what
actually happened was it was a get that was sent with
the account SID, right? And so that was the account
SID that we used from, if we look back at the
query parameters here, the account SID showed up
there and then it automatically did a two URL encoded
and if you look it put the question mark in for us
and it did that percent 2B for us automatically URL
encoded, very nice, right? And we can see the headers that were sent and we can also take a look. Let's look again at this preview. So we see that we had, the response came back
and this is JSON, right? So we have a key called messages. And this messages has this, it starts out, there can be multiple
messages here, right? So this is the start of what's known as a list or an array and
then there's an object. And the start of the object
is always done with one of these mustaches, and
we call those mustaches 'cause if you kind of
turn your head sideways, it looks like a mustache. So all between the opening
mustache and the closing mustache is the information about
the messages, right? So here's the, and there's
the closing bit of my list. There's only one. This is
the closing mustache there. And so part of the
message that we can see, we can see who it was to, that's my Twilio phone number here. And we could see the from,
there's my phone number there, please don't call too late,
but that's my phone number. And I did say, I said "Yo"
to it, which is awesome. So now we have this. Now this
step is completely optional. This is something that I like
to do is I like to take notes. All right, so there's
this incoming message log. I like to keep notes and I put those in the description over here. And so let's see this
returns all incoming. Well, let's be a little bit more, all messages sent to
this phone number, right? And one of the things that I like to do is I like to put on the docs here. So if I ever come back and I want to find how was it that
I learned how to do that, I can go and look and put a link there. So I'm gonna go flip back
over to the docs real quick. And this is read a message
with matching a filter. I'm gonna copy this
link, I'm gonna grab this or click this here so that then
it changed the URL up here. I'm gonna copy this and this is what I'm gonna store in my notes. Again, this is totally
optional and this is just notes for you for later 'cause
you could end up having a whole bunch of these and you might not remember how you found how to do that. If there's something specific or strange about the API that she wanted to know, I keep the notes in there and it's a just a handy learning tool and
again, totally optional. So we've got our first entry all set and I think we should add another one. Why don't we create the
send message one, right? So the one that we did before we sent messages, let's do that. So I'm just gonna duplicate
this 'cause it's got a bunch of the information
that I already need in it. So I'm gonna duplicate it and
what I'm going to do here is I'm gonna duplicate and I'm
gonna say "Send message," right? So when we sent a message before, remember it wasn't a get, it's a post. So I'm gonna change, I'm gonna change that
from a get to a post. So now we've got this send message that's a post and the query string. I don't want to send a
query string anymore, right? So remember wait, before when we did this, we sent it to using the data URL encode. In fact let's go, let's
pop back over there and look at what it was that we did. So in the documentation over here we have this create a message resource. So, on the message resource
page here, we can look and we can go to this
create a message resource and there's some information about it. So you send this http post
and you can see that again we were, remember before
we were doing this data URL encode and we were
doing this URL encoded. So it's this form encoding
is what's happening here. And oh look, well a couple things actually there's a nice warning here. This says if you wanna send messages while in trial mode you must
verify your two numbers. So if you wanted to send to somebody else, you could put them in
this verified caller IDs if you wanted to, you could
send to somebody else as well. Just there. That's how you do that. If you wanted to test or show somebody what you're building,
that's how you do that. After of course, after
you're not in trial mode, you could submit to
whoever you would like to. So when we are creating a message, we must include the to, right? We need that and we need the from. So we'll do either and
we'll do body and there's this media URL which means
I can send a picture. Let's do that. Let's make it
so that it sends a picture. Now when I am in REST Fox over here, I don't want to use the query anymore, I'm gonna keep the path 'cause
the path is the same, right? So we're gonna do, we're gonna
do a post to that same URL, Twilio account slash account
SID messages dot JSON and we're gonna make a post
to it instead of making a list and retrieving,
we're going to create. So we're gonna go under
body and for the body we're gonna make it form URL encoded. And what we wanna do there
is we wanna send it to, so I'm gonna send this to my number. Again, don't call too
late, (432) 527-4274. No really, if you wanna call and get feedback, that's
fine, I'd love to chat. So we'll do from, and
that is my number again, this is my number and
which was that number. So we can come here into the message log. We can go pull that number
from the query string. So this is my Twilio number there. From is this value there and we are going to add the body, the body will say sent from REST Fox and let's add our media URL. And I just happen to have
one of my favorite photos, which you will have to check out for yourself to know what it is. But it is a photo that
I pick, if you will, that I'm going to send to myself. It's also in the notes if
you want to do this as well, if you wanna copy that and paste that. So here we go. I am going to do a send. Now remember I'm also
authenticated with my username and password 'cause that
copied across when I did it. So I'm gonna do a to, from,
a body and a media URL. So now I'm gonna go ahead
and click Send and boom, we got our message back, right? So the response, we got
a 201 created, right? So it was created in the body, we can see the body of our message. The key is sent from REST Fox,
it's got some information. We can go ahead and get
access to that message if we wanted to and it's got
these actual media resources down here, which we can
also take a look at. And we could, if we wanted to
open up a whole 'nother one of these and explore and
see what that looked like. But let's take a look
at that in a new tool. Before we do go to look at that new tool, one thing that I don't
love about what we just did are in my, in these requests, in these separate requests, these
are duplicated, right? I've got this username and password. If I go to my post send message, I've got this username and password and they're duplicated there,
which isn't great, right? That's not excellent. One of the things and one of
the tools that most of these REST clients provide is a
thing called an environment. And let's set that up really
quick, real quick for this. So if I come here under this environment, here is my default
collection and I can add a new environment, I'm
gonna add one for Twilio. Now the way that these work
are, they are JSON based. So this is, remember this
is the start of an object. Now if you've never written JSON before, take your time, use some patience. One of the things that you
could do is you could come in and you can put in account
Twilio account SID, and you do the key and then you do a colon and you can see that
I'm, this is unexpected JSON down here, it's helping me out. And now I'm gonna put in
my account SID and again, let me go copy that one more
time and I don't have to copy this anymore 'cause it will
be part of my environment. It will be here with me,
which is really nice. So come over here, I'm gonna paste that and now I want to add a new key. So the way JSON works is you
put a comma after that, right? And I'm gonna put a new, the new key here and we'll do a Twilio
account or Auth token. And again, this is, that can
be, that key can be whatever you want it to be and we'll
be able to reference it. So I'm gonna come and grab my Auth token and I'm going to change this, right? So that's a great use case
of this is I don't want you to be able to, I am going
to change this, right? So as soon as this, as soon
as I'm done recording this, I'm gonna change my Auth
token and that would mean that I'd have to go
change each one of 'em. But now I have one place
where it's defined. I have one place in my
environment that's defined. So I have this environment
here that says Twilio. Now instead of username I can
do this mustache, mustache. And I can say Twilio account SID and that's the way the
templating language works here. And then most of these REST clients and you can do Twilio token. So when you see that's what's happening. That is the environment, it's using the environment variables. I'm gonna go do that for here. And also I'm gonna copy
my Auth token for here. And so now I only need to
change that in one place in my environment and
you can also use it here. So like not like before I can, I can also put my account SID here. So that will also make this
so that it's shareable, right? So if I don't specify my information in here, I can share it. So you what you could do, and
actually why don't you try to do it, why don't you try to
add your Twilio phone number and see if you can figure out how to add to your JSON there,
your Twilio phone number and then you could replace it, right? You could replace it here with your from, from your Twilio phone
number, pretty neat, right? So that's a good, little trick
that you could do in here. You could do your Twilio phone number, you could use it there too. So anything that you're using is something that you can kind of store
there in your environment. And what's nice about that, let's make sure that it still works. Yep, it's still working. And let's make sure, make sure my, oh, I'm not gonna send another
picture to myself, that's fine. So we know that this
environment is now working and it's here and I don't need to go back and get those every
single time, really handy. And what's nice is you can
do these imports and exports and we'll take a look
at that here in a bit. So when we get back
we're gonna take a look in a different tool
'cause this is REST Fox and I know that you're probably
getting ready for a rest. So let's take a quick break
and then let's see if we can't retrieve that pic that
I sent myself via this API. But let's do that in another
Postman mania or REST client, right after a quick break, that is. (upbeat music) All right, quick refresher. We had just sent a message from
REST Fox, a REST API client. Here's the body of the message
we just sent from REST Fox and we actually sent
across some media with it. You can see here it has
this Num Media one 'cause each text message can have
multiple medias attached. And if you scroll down here,
you'll can see that there is this key of sub resource
URIs and it has a list of an object here and one
of the objects is for media. And what this will do is
this will allow whatever's at this URL will give us the accounts for this account, for
this message specifically, it'll give us all of the
media that is listed. Now, typically when I have
something that's this far out, we could actually add another one here. But I thought I'd show you a
little bit of how my process normally looks in case we wanted
to see what that felt like. So I use an editor called
Visual Studio Code. It's free, it's available and this is where I do my coding from. So I start here, I start
working on my coding. I would love for you to
go ahead and download this because I wanna show you
a tool that's inside here that will allow us to do
a REST client as well. So go ahead and pause me, get
Visual Studio Code installed and when you do come back
and I'll show you something. (upbeat music) Okay, so once you get
Visual Studio Code up and running, if you press Command+Shift+P, there is a thing called extensions. And this will do a little, if you type in Install Extensions, you can come here and you can see different
things that are available. What I want you to install
is a thing called Thunder. We're gonna do install a
thing called Thunder Client. And it's this one here, it's a lightweight REST
API client for a VS code. It's really powerful and the good news is, is it is Postman-esque. You are gonna feel very familiar when you take a look at this. So if you do it, you can
go ahead and click Install. And what will happen is there'll
be a little Thunder Client that will install over here like so. And just like you've seen
before, there are these, this concept of collections
and we can make a new one. So I'll make a new collection
for Twilio and typically what I'm doing is I'm coding
and I run into this API and I'm like, ooh, I wonder what this is. I'm gonna go explore it a little bit and I'll explore it right
from my editor, right? So I'll write my code here
and then I can come over here and just take a look at what was there. And so let's go back to
REST Fox and I'm gonna grab that REST Fox that we had here, right? So we're gonna do that. I'm gonna grab that and I'm
gonna come back over here to Twilio, I'm gonna make a new request. I get to name it. And
this was the media check. Let's no, we're gonna do all media. All media for a specific message, right? So here we go, I'm gonna paste that URL in here and of course it's missing that first part, which was api.twilio.com. So again, this is the going for that account to those messages. I'm gonna look here at where it says Auth. So it says inherent
authentication values from parent. This is a very nice thing and
this is something that Postman has too that REST Fox
doesn't necessarily have. We put this in our own
environment, it's kind of similar, but you can make, for this
collection that we built, we can actually do the
settings for the collection. And if I come in here, I can set the Auth up here so I could do this basic Auth here and go grab my stuff. And so just a reminder
in REST Fox, when we did that before we were in
the environment of Twilio and I was able to grab the
Twilio account SID, right? So let's go back to our code
here and the Twilio account SID is the username and the password. Let's go back to that
environment in REST Fox. The password is that Auth. There we go, we'll paste that there. Perfect. So I'm gonna click Save on this. And so now this all media should work. So I'm gonna go ahead, I'm gonna do a send to this and there
we go, we got it back. And we can see there's a
media list is the key here. And again, it's an array of those and this is the list of all of the
media that's available. And so now look at this collection. So we have a collection of accounts and here's a specific account. We have a collection,
that account has messages. That message has media and
that media has an entry, a media entry, and that's it. This is what we're looking at right here. So something that's pretty cool. The way that this works is if I get this, I can get some metadata
information about it. But if I get just a little bit of it, if I just go ahead and
take this the way that, the way that Twilio works,
and not all APIs do this, but if I do this without
the extension here, I'll actually get back
the picture that I sent. So I'm gonna do that, I'm gonna make a new little request here. So a new request, and we're gonna call this, get the pic, right? We're gonna get that pic that I sent 'cause we don't, still don't
know what that pic was. What was it? Let's go take a look. So, again, at the end
of this, oops, sorry. At the end of this, there
is no extension, right? So I got rid of the dot
JSON extension and I'm gonna put it the front here,
HTTPS api.twilio.com. And the interesting thing
about this is this pic is not authenticated and
if you do authenticate, you end up actually having some problems. So I'm gonna tell this
request specifically to not inherit value. So I'm gonna disable this so
that it's not authenticated. So when I click this, if all goes well, we should see the pic that I submitted, awesome, and we do, cool. So it's a little big, it's a little big of a
pic that was sent here. And we could take a
look at some stuff here. We could look at the
headers that were sent. So we can see a couple things. One of the things that I
think is really interesting is when it says last modified,
so the last modified date, if you have a request that has this on it, it means that you can use caching. So you can, when you make the
request, you can actually say, if it's been modified
since this time, do that. So I'm gonna do that, I'm gonna grab this. Let's just take a look
and see what that does. So I'm gonna go to headers here and I'm gonna put a new
header in here of if, and you can see that
there's auto complete. So it's if modified since. So again, this is the
request that I am making, I'm making this request and
I'm gonna say if it's been modified since then, give me
and otherwise let me know. And so the way that it lets
you know is 304 not modified. So that's a status and you'll see that I got zero bytes back. So that is how caching works and what you can do to send this across. So, this is really powerful, right? I didn't need to set up
all the other things. And it's kind of really a
quick little look at this. I don't actually even
need to do a collection. I can just do a new request
outside of it and I kind of explore through and see
how these things are working. Which ding, ding, ding,
means we covered another part of a RESTful API
constraint scavenger hunt. Using standard HTTP caching mechanisms like last modified and e-tags, a RESTful API should support caching. It's up to you to maintain
the cache on your client and decorate requests,
but this can come in really handy to avoid
making unneeded requests. And those are the Postman-esque
things I wanted you to see. I wanted you to be able to
do that without diving in necessarily to do all of the
Postman enterprise things that you wanna do, but I think it's time. I think you should feel
comfortable enough that we can now look at Postman and see what
we've already learned there. So I'm gonna go here and
I'm gonna just do a quick, quick little Google search for Postman. And this is really nice. You can do this for whatever
API you're working at with. And since we're working with Twilio, I'm gonna search for the
Postman Twilio collection. So there's some docs on Twilio about it, but if you look here, there's this Twilio
Postman on the API network. So this is important
to know, there's a lot of things on this API network where they've built APIs for
you to go and share. So I'm gonna click this and now note I'm inside of a web browser. Postman's done a really gorgeous job of letting you run inside of your browser. You also can run it locally
like we did with REST Fox, but I'm gonna run this from my browser. So I'm gonna go into this
messaging SMS and you can see there's all sorts of
different things in here. It's a little bit hard to get to here, but you could change things. Put in your account SID,
and all sorts of things. Like we saw, look, here's
the double mustaches, right? And here's a thing to send
an SMS and it's super cool. It's neat, right? And so you've seen this. Here's your authorization, the headers, the body, there's collections. And what's cool is somebody's already built these collections for you and they're sharing your
stuff this way, right? So that's kind of nice. So there again, there's
path variables, right? And the path variables coming up here. There's the call and
account SID that you saw from before, here, somebody's
using this as the start, the https API twilio.com and
it's doing a post, right? So it feels very similar. So
you're familiar with this. There's also a bunch of other
things over here that it can do that could get a
little bit distracting. And that's what I was
trying to kind of avoid 'cause I wanted you to
get familiar with it. But know that this exists. One of the really cool
things that Postman does is if you click over here on
this far right over here, there's this little code,
it's like open and closed tag. This is really neat.
So we have Curl, right? So we could see, this
is how I would go ahead and do this and this, this
feels familiar, right? This is how what we actually did, we did this curl statement,
but check this out. You can do this in any
programming language. So the trick here, the
trick to remember is that any programming language that
can make an HTTP request, like it has a client built into it, because these are all
standard, the REST API, right? We're following these constraints that have been defined, it can
generate code for you. So here's node JS using
a package called Axios. So Axios allows you to fetch things. So this is what it would look like if you tried to write that using Axios. And if you look in here,
you come down here, here it is in PHP with Guzzle,
I don't know what guzzle is. I like that though, that's why I chose it. So you could see that it's
generating this code for you. And if I copy this and pasted it into my PHP code or my Python
code or my Java code, it would just work and that's really handy that is if the company that's
providing the API doesn't have a helper library or an SDK,
a software development kit, which we haven't looked at
yet, but we're about ready to, Twilio does have one of
those but if you were looking at one of these that didn't, this is a great way to get that code. So again, check out the API network, this Postman API network, it's cool. I think you're ready now
to use this if you want to. But also feel free to use the other tools, explore the APIs in a comfortable way, wherever you might be
most comfortable with 'cause there's all sorts
of really fancy tools here on Postman and like I said,
there are courses on how to take full use of all of
the things that are available. Awesome job diving into
all those tools, Postman is a super powerful tool and it
keeps getting better every day. There are so many features
that we didn't cover. We barely even scratched the surface. There's an entire course out there on it. Check the notes for a way to see that. We saw how to organize
our request together into collections as well as share common and secure values by using variables. We learned how to add
different values to request both informed values,
query strings and headers. And we also saw how to navigate through various sub resources via clicking URLs. We even saw how to create
actual runnable code from your request, while we were
in the Twilio documentation, you might have noticed the code examples on the screen on that page. It's possible the tab
between various language implementations and solutions. Many products offer
what is known as an SDK or software development kit
or helper library that allows you to interact with their
product in your native language. As you can see, it abstracts
away the REST API completely. Let's take a look at the
Twilio helper library next. Before that though, just a quick reminder to make sure that you check
the notes on this video. There's a link to a repository
of built out collections that are ready for you to use. There are lots of great
APIs to practice with. All the tools that we just looked at are great for accessing
and exploring APIs. However, when it comes time you're most likely gonna wanna write some code. Now as we saw in Postman, you can actually generate code. All programming languages
have some sort of way of making HTTP requests and
as you know, HTTP requests are all we really need to
interact with REST APIs. So writing that sort of
code is totally fine, but you'll find that
you'll end up writing a lot of what is known as boiler plate code. By boiler plate I mean
code that is repetitive and almost always the same,
just with a few tweaks. Many products and services have created a solution to help you avoid this problem. They're often called helper libraries or SDKs, software development kits. They'll be specific to
your programming language. These libraries help make your code more concise and legible. They usually also provide
additional documentation for your editor, which I find super handy. Let's go check out some
of these helper libraries. Okay, so let's take a look at
one of these helper libraries. Let's take a look at the
first one that's here. So again, I'm in the docs SMS,
create a message resource. I'm here under the curl
tab currently, remember, when we did this, we went
and we saw how to do this. We passed the from, the
body, and the to, we passed in these environment variables
as what this dollar is. And this dollar Twilio Auth token, their environment variables and it's also used here in the URL. So we had done that, we
had done that with Curl. Now one of the really nice things about these helper libraries is
they look very similar, but it's taken away this whole notion. So let's go here. I'm
gonna go to this node JS. Now, quick word of warning,
if JavaScript is new to you, there is some stuff here that
might be a little confusing. And I want this to just
kind of wash over you. I want you to more feel what
it feels like as I explain it and don't be too concerned
with not exactly understanding all of the things that can
happen, especially if you're one of the folks who has the
Hello World requirement. Please don't feel like you need to fully understand all this. I will walk through this code
line by line and tell you what it's doing and it
will be familiar to what we've been doing just in
a programming language that you might not yet be familiar with. So I'll take my time
and you take your time, give yourself some patience. In fact, I'd like to
suggest that if you are in the boat where you have
not written code like this before that you watch me
first and then come back and do it later, we're
gonna take advantage of the fact that we're in a video, right? You can take me right back to right here and take me back to right
here and we could get started. So one of the things that I love about Twilio's documentation is that you can just copy it and it should work. So this is what was happening when we created something here, right? So we created a message. So this is, you get this
authenticated client, right? We know what that is. We authenticate with our
client, with our account SID and our Auth token like we've been doing. And then we're gonna do
this messages, a client. So client.messages,
there's our REST client, .messages.create, and we're
gonna pass in the from the body and the to and it's got all
the information that we know. And then there's doing some
of this JavaScript stuff. So then we're gonna get a promise back and then we're gonna get
access to the message. And this console log is going
to print out to the screen. I don't think we should send a message. Why don't we look at the
messages that we've done? Let's do that. So I'm
gonna go to that example. So I'm gonna choose down
here, this list all messages. Awesome, so we'll take a look at all of the messages that are in the account. Now what I can do is I can just copy this. So I'm gonna copy this and I'm gonna run it on my local machine. Now I'm just exploring, and this probably happens
as you're looking at APIs. So typically I have a folder
on my computer called Scratch. And if you wanna make
one, you do Mkdir Scratch. Just kind of put this
wherever you want to. And then you get into that directory. If you're doing this in
your terminal on Windows, there are some instructions in the notes on how to do exactly that. So now I've got this
directory named Scratch. Now I told you before I was
using Visual Studio Code, which I hope that you have installed. And so I'm gonna do code
dot, and if this doesn't work for you, there are instructions on how to get this installed
properly on your machine. What it should do is pop open my Visual Studio code
directly in that directory. So I'm in this directory here and I'm gonna make a new file here. I'm gonna call it explorer.JS 'cause this is typically what I do. So I'm gonna come in here and
I am going to paste that code. Awesome, so now I have this code here and this code is on my local
machine, which is awesome. So now I'm gonna try
to make this code run. Now one thing that I
know for sure that I need to do is I need to download
the Helper library. So if I wanted to go here, I
could go to this node install. I happen to know how to do that. So I'm gonna go up here under
terminal and I'm gonna do New Terminal and in Visual
Studio Code, this is really nice. My terminal can actually run
the same terminal that I used to open it is running
down here in the bottom. And what I'm going to do is
I'm gonna use a package manager to install the Twilio Helper library. So I'm gonna say NPM Install Twilio. So NPM is node package manager. And if you do not have
this, if this does not work, check the notes because it means that Node is probably not installed
on your computer. And if Node is not
installed on your computer, there is a great walkthrough in the notes on how to get Node installed. So I now have Twilio
Helper Library installed, which means this required Twilio statement here is requiring that library. Remember in REST Fox how
there was an environment and we stored the account
SID and the Auth token? We can do the same thing
on our local machine. We can set up a little environment here. And actually if we go ahead and we click this Twilio Secure,
there's some great examples in here and how you could do that. So one of the things
that this suggests doing, you can see it's for Mac
and Linux and different, different shelves do different things. If you run this in your command line, you can set your environment variables and then when you run Node it will work. I'm gonna do, I'm gonna do this one. So I'm gonna copy, copy this here and I am going to just paste this. We'll paste this, I'll
show you what it does. So it's saying we want
to export my account SID and my Auth token just we're
very familiar with these days. So we're gonna do that.
Let's do this real quick. So I'm gonna pop in my
account token there. I'm gonna go back over to my console, scroll down and grab my account here. And then I'm gonna paste
that and I am gonna go and grab my Auth token and
I am going to paste that. So again, I got to that,
oops, accidentally pasted my Auth token in the wrong line there. So I know that it started
with a four and I'm gonna paste it down here where
it says Your Auth Token. So basically what this is
doing is this is writing a new file that will
have this information. I'll show you that here in a second. So there's my, it's gonna
write these two lines. I'll show you what that looks like. So it's gonna create a new
file called Twilio.env and then it's gonna append that that's
what this double --Twilio and then it's gonna source that, which means run that environment variable. So if all is working
well, now if I say Echo and I can do Twilio
account SID, we can see that I have that
available and that created this file here called Twilio.env and you can see there is my
account SID and my token, which is nice because now this code works, it should be working and using this. And in fact if all is
going right, so I've got Node installed, I installed
the helper library, I put my account SID from the console into this Twilio.env and then I
did this final command here, the source Twilio.env
which will run that file and put those variables into
my environment variables. And as I showed you
that they were working. So let's go ahead and
let's do node explorer. So what's gonna happen, let's
take a look really quick. I'll show you, let's see, let's
make sure we got it working. Cool, we did so let's walk
the code really quick. So this is pasted
straight from those docs. So we're getting a client back
from this required Twilio, this is a Twilio library and when you get the Twilio library, if
you pass it in account SID and an Auth token, it'll
automatically create a brand new REST client for you, right? So this is a client that you're able to use to hit the REST API, a Twilio. And because it knows who you are, it's able to access stuff on your behalf. So very similar to what we
were doing with the Curl, but this client, we can
use this multiple times, it will always be authenticated. So we're saying of all of the messages, we want to list them, right? So we wanna get a list
of all of the messages, actually not all of
them, only 20 of those. So let's go ahead, I'm gonna just, we know that we haven't sent
20, I'm gonna get rid of this. So you can kind of just
see this other style here. So we're gonna say of those,
we're gonna do this list and then I'm gonna bring
this back a little bit here so you can kind of see, let's change the structure of this a little bit. So we'll say client messages and then we're gonna do a list on those. Now the way that this works
is this is asynchronous. So JavaScript is asynchronous
and if JavaScript is new to you, you probably haven't encountered its asynchronous behavior. What we're going to go
over here might very well be overwhelming, but
it'll make sense someday if you stick with it, I promise. Now I've added notes, but
really please, please, please, please do not
let this stress you out. I just want this to go
over your mind about what's happening here and
it's important to understand because our client here, these
list methods are asynchronous that which means that
it's gonna go and run Auth and do some things and then
it's going to come back. When that comes back,
it's gonna run this code. So this is how a promise works. So it's going to say then
after you go and make that request, then give me
the messages and just so you, what's kind of strange about that is if you're probably used to
code working like this. So I'm gonna write out to the screen that's this console log. I'm gonna say Starting Program. And we should see that line print. Now you might think that
this is going to print, it's gonna run this and
then go, but if you, I'll show you here, if
I do this console log and I say gathering message
log, what you'll see is it's gonna say this,
this line's gonna start, but immediately it's
gonna go to the next line. So let's do that. Let's
run that one more time. I didn't save it. So of
course it won't do anything. So you can see this little
dot here in visual studio. It didn't save, so I'm gonna save that, run that one more time, here we go. And you'll see right away it's a starting program gathering message log. So it ran this, but then
it went down to here. So it did not wait because
this is asynchronous. What's happening here is
asynchronous and what's happening is client message list returns a promise. Now it's a promise that
in the future there will be a value and
that value is messages. And so the way that you
write that code is this then waits, it defines a function here and as soon as this is done,
it will run this function. As soon as they come back,
it will run the function. So that's what happened, right? So it came, it started,
it then ran the function. And when I say function,
you might not have seen this before, but in JavaScript
you can make a function. I'm gonna put parentheses here so it's a little bit more clear. These are the parameters for the function. And this fat arrow is saying, this is what happens when the function runs, this like little, they
call it the fat arrow. It's kind of cute, right? So it's an equal sign
and then a greater than, it's called a fat arrow and that's a way of quickly defining a function
and so you can see here, there's another one here
that's doing it as well. So it could be a little bit
messy as you're looking in. See how all these parens
that we're looking at, it's kind of kind of hard
to understand and read. If this is your first
time looking at that, I totally feel for you
and so this messages that comes through here is an array. So, what was very nice is it
came across this messages list. This is an array, it was a
JavaScript array by itself. They have this method
called For Each on it. And it will let you loop
through each of the values that are in an array and
you'll notice that the object that was inside of that
array has some properties. So what happened was the client
went and made the request, made the http request, it got
back that JSON that we saw. Let me just go show you one more time. Let's make sure that we're
looking at the right thing here. So we, this is the same
code that we just saw. This JSON was returned, right? This JSON was returned,
but what the client did for us was it inflated
these into messages, right? So these are, this is a string of things and it came back JSON but
I'm able to actually work with each of these messages
as if they're an object. So let's look at that again. So list returned this object,
this array of messages and each one of those in that array I'm able to use an array method for each. And this message is an actual object that has a property called SID. So again, if that is all
new JavaScript terms to you, don't worry too much about it. Basically we went and got
the messages and we showed the messages that we got,
that's what this is saying. One of the things that
I want you to be careful of as you're looking at
promises, and you might see this sometimes as you work
with APIs, 'cause oftentimes APIs that you hit are going
to be asynchronous like this. You might see that you need to be able to, you might run into an error and what might happen is
it might get swallowed. In fact, let me cause one to happen. So here it's supposed to say Auth token, I'm just gonna put in my luggage, the password to my
luggage 1, 2, 3, 4, 5, 6. So that is not my account
SID that is going in there. So I had the wrong account SID. So I'm gonna say that
hey this is the client, this is what how I want
you to authenticate and it's gonna go to try to
make this and it's gonna fail. Let's see what happens when it fails. Well I didn't save it
so let's save it again. Boy that's a lesson that
I really hit in the home. You gotta make sure you save your file or the code doesn't run. So let's do it again, and
you'll notice that I didn't get any error at all and
that can be confusing, that is something that is very strange because obviously
something wrong happened, I didn't get any of the messages back, but it doesn't look
like I had any problems. So what's happening 'cause
this is running asynchronously, this then never runs, right? We never get a chance to run this 'cause this list method didn't
actually finish working. So one of the things you always
wanna make sure that you do is to every promise you can
catch and you can catch an error and I'm gonna make a fat
arrow 'cause I'm gonna have a function happen here that
says console dot error, E-R-R. Okay, so now I'm gonna print that out, I'm gonna print out the error. Let's run that again,
let's see what happens. Ah, now we see the error and you'll see that sometimes this is what comes back is there was an
authentication error, right? And we got a very specific
error on this 2003 and it will help us kind of
look at what's happening. Oh, here, great. This is right. My Auth token is wrong, the wrong combination of
account SID and Auth token. Exactly. That is what has happened. So cool use of things there. I'm gonna put this back so
that we have things working. So this was Auth token and I can still leave my error in there. I'm not gonna hit an error,
so it's not gonna happen. So a promise has a then and
it also has a catch, right? So let's do that. So I'm gonna run that one
more time and save it. Wow y'all, I gotta get
better at saving. Here we go. There we go. So now we're back
to working again, awesome. All right, I wanna show you a little bit of a different way that
JavaScript can work asynchronously that you might also see. And this is really syntactical sugar. It's called async a weight and if you just wait a
bit, it'll all sink in. I promise that's a, there
was three jokes in that one. That was a hat trick of a
joke. All right, so here we go. So the way that it works,
the way that this works is you can say that a function
is going to be asynchronous and we want this to run
asynchronously, so I was thinking we're getting ready to
start using our number in an application and to get
there we need to clean it up. We have a bunch of weird
messages in there that aren't gonna be relevant to the
messages that we have. So I'm gonna make a new
function and I'm gonna call it "Delete All Messages," okay? And when you define a
function, you can kind of put, this is the parameters that it takes. We're not gonna say that,
there are no parameters. And then I'm gonna run this function. So while this is an asynchronous function, I can actually make it look
more like it is in line so it can kind of run the
way that we want it to. So I'm gonna say "const
messages" equals await. So now I have, because the
function itself is asynchronous 'cause I've used this here I
can use this keyword, await, and I'm gonna say client
dot messages dot list. And so now I think this is a
little bit more clear, right? So this is basically doing
the same thing, right? These messages are the same
messages that were coming into this function, but
now it's out on this side. So I have this variable
that's called messages. So, and that's in array, right? And I could do this exact same thing here and I could list that the same way. But let's go a little bit farther. So I'm gonna say for each of the messages, for each message that is
of the messages array. So these are those inflated
messages that we saw. One of the cool things
that you're able to do with the client is the
object that's returned back has actually has some properties on 'em. And one of those properties
that it has is called Delete. Before we do that, I'm
gonna make sure that, let's do a warning here real quick. So I'm gonna say console
dot warn, we're gonna say would have deleted,
I'm actually gonna use, if you use these back ticks,
this is kind of a neat trick. You can use this back tick
to do string interpolation. So we'll say would have
deleted message dot SID. So again, that's the
string identifier of that. So would've deleted message dot SID. So, and we will close that
function out. All right? And now I'm going to call
that function in this, you know, of course that's how we call it. And this is would actually be a promise, this would be a very
similar, so we could do this, we could do a then, well
in fact let's do it, we'll say then, and if you wanted to call, make a function that has no parameters 'cause I'm not returning anything, right? I'm not returning anything
from that function. I'm just gonna say console dot log. And I'm gonna write done
and I will put all of these, this code into the notes
so you can also copy and paste it if you want to. And I'm gonna do the same
thing that I did before. Catch the error and I'll do
will do console dot error. And now if you do the
console is, you know, of course what's running
when the program runs, it's running out to the screen
and there's different levels that you can do and error is one of those. And if I just pass the
error that happened there, so I'm gonna warn that we would've deleted the message but let's take
a look at what happened. So I'm gonna get rid, I'm gonna keep the starting
program here, right? So we can do starting program and then it's gonna do
delete all messages, it's gonna call that and
then when it's all done, it will say done, I'm gonna
get rid of what we had here. Okay, so we have delete all
messages, it's gonna go in, it's gonna get a list
of all of the messages. It's gonna loop through
each one of those messages. And when it is done, we're gonna, right now we're gonna warn
that it's would have deleted it and this is what we're
eventually going to do because there's a function
that's available to it. All right? So I'm gonna
save that, I'm gonna run it. Let's see what happens. Okay? So it would've deleted some of our SIDs. And again this is the
MM, this is, the MM means that it was the MMS which is the one with the picture and the rest
of the SM's that we have. So I think I am ready to do this. I hope that you are
ready to do this as well. Again, this code should
you want it is available in the repo 'cause you want to run this 'cause you want to delete these messages. So let's, I'm gonna
say, I would've deleted, I'm gonna say deleting
and then here we go. I'm gonna save that, I'm gonna run it. And so message, the message
object that's coming back from this client is really
has enough information to make another API call
to delete itself, right? Because the object itself
knows how to do that the library's made an
object that is smart enough to be able to call delete
on it and it feels like it's just working that
way, but it's really making a REST API call to make a delete request. It's pretty cool right? Here we go. Message dot delete is not a function. What I meant was actually remove, so the function name is
remove on the message. So here we go. So, and you saw that
there was an error, right? That was the error that just happened, good thing I put that catch in there, otherwise we would've thought it worked. So here we go, so in Node explorer, remove instead deleting,
deleting, deleting. We deleted all of those. So remove is the name of
the function that's there, but it is doing a delete,
making a delete call. Cool, so we have now
cleaned out and if we try to run it again, you'll see that there's no messages left for it to delete. Awesome, now if you have just watched that and were very confused,
let's walk this last bit and then I want you to
rewind it one more time. So I've made a function
that is asynchronous and that function is
called delete all messages. And because it's asynchronous, I'm able to use this await
which will return this, this client messages, that
list returns a promise, okay? But, and a promise of the future. But because it's being awaited, it's going to return
it right here in line. Then I'm gonna loop through
each of those messages and because that message
came back from the API and an object was created
thanks to our helper library here I have a method on
that message called remove. And it will actually go
and do that next level, the next level of delete there for me. So it's really nice. This object feels like
it would feel if you were writing JavaScript code,
it would feel this way. But behind the scenes
we know that it's doing this API calls and the client library has extracted all of that away from us. And if now if you go and you take a look, let's go back really
quick, let's take a look. There's other helper libraries. So if Python happens to be your language, there's how you do it. So it's client messages dot
list and for record and messages and you print the record SID
and you can see that the code looks a little bit different
in all of the languages that you go through, but
it's also kind of similar. And so that's really nice
about the standardness of a REST API is that the helper library is producing code that feels the same in each way because the
library's kind of the same. And you'll find that as you use other APIs and they have helper libraries, they will mimic the way
that the REST API looks. So I realize that was a lot. I don't want you to get
hung up if you feel like you can't completely
understand what that is. In the next unit what we're
gonna do is we're gonna go into more deep things and
I know you can do this. So, this code is there
and also if you feel like you want me to go back and
explain that again, please, please, please, please
pause me, slow me down, let me walk through those different things but don't feel like you need
to be able to read this. I want you to just conceptually
understand that you're using a helper library that's
abstracting away all of the HTTP API things that we were doing with curl and we are doing with REST Fox. This is just doing it in code
and it's doing it for you. A lot of the magic is gone and
hidden and tucked away and it just feels like you're actually
working with these objects. That's the power of the
abstraction. Awesome. Did you see how the helper
libraries are all similar yet match the development workflow
and style of each language? This is one of the benefits of
helper libraries in general. They abstract away the
HTTP client connection and the boiler plate necessary
to make REST API calls. They also behave as you
expect them to behave. It feels natural. The way that we were able to
delete from the resource itself helps to unlock another
REST API constraint scavenger hunt item and
that one is uniform design. Now this constraint has four subsections, one of which we just discussed,
resource manipulation through representations,
because enough information was included in the response, it was clear for us how we could modify
and delete the resource. Another subsection and here is resource identification and requests. That's the URIs that are
included and we've seen that. But because the URIs are included we know how to get and manipulate
specific resources. Uniform use of the http
verbs is pretty powerful. We just wrote some scripts that make use of helper libraries. These libraries are super handy for automation based tasks or batch scripting, which is like making a whole
bunch of calls at once. Now while we're talking
about this, we should cover another common tool for
talking to external APIs and that one is CLI,
command line interface. There it is again. Command line interfaces
can be used to make API calls from an
executable on your machine. More and more these are showing
up for tools that require authentication and do a
bunch of different services. This concept is popular
amongst cloud providers where setting something up needs to be done quickly from the command line. Check the notes for more. Another commonplace where
you'll use helper libraries is from within applications
that you're building. Let's get to the final unit
of this course and implement an external API into an
existing web application. You've got this. Ooh, we're here. I love this part. The building part. We are going to build a web
application that shows off a set of user submitted
photos for a specific prompt. But here's where our app is gonna stick out from all the rest. We are gonna let our
users submit their photos and captions via a text message. What this will enable
us to do is put up signs and billboards and
physical spaces that says text a photo to this
number and then our site will gather those on a
webpage and display them. Now you're probably wondering
two things right now. The first one is probably, wait, what are those photos
they're gonna be texting? And that's a great question. We are gonna be building this application so it can be dynamic. So you can define whatever you want. Like text me a photo of your dog, send us a photo of the
view out your window. Snap me a pic of the
best impersonation of me. I don't know, anything along those lines. Now secondly, you're probably
wondering, wait a second, you said I didn't need
to know how to code. If you already know how to make a website, this part might not have phased you. But if building a website is outside of your learning journey
thus far, no sweat, I've got it set up and
we're gonna take our time and we're gonna focus on making
things work using this API. All right, let's do this. Okay, so I have a template
here in the notes. In the unit three video one
we have this index.html, which is our web application. If you come in here you can scroll, you can kind of see things here. The app is called Pickle where
you get to pick your pics, Peter picked a pickled pickle,
that sort of fun joke there. And then we're gonna click
this Raw button right here. We're gonna get a hold of this raw and I am going to highlight everything and use the magical
developer Command C copy. And then I'm gonna come over to back to my scratch on my visual studio code. I'm gonna make a new file. I'm gonna call that index.html, hypertext markup language, right? And I'm gonna paste that right here. So now I have that code
locally on my machine. If you are a get user, you
could definitely check this out and have your own version
of this if you wanted to but that's a good way to
get this here locally 'cause we're just gonna explore around
here just for a little bit. Let's take a look at
this file as it exists. This is something that might happen to you as a developer who knows now about APIs. They might say, "Hey,
I've got this template and I would love for you to be able to set it up to make the API work." So the first thing to do, if
you wanna look at an index file locally on your computer, you
could set up a web server. I've made it so we don't
need to have a web server so we can just go ahead,
I'm gonna go to my terminal, I'm gonna do a new terminal here. I'm gonna open that up and I'm
just say open index dot html. Now what that's going to do in my Mac is going to
open this up for Windows, take a look and see
how to do this exactly. But this what this will do,
it will update my pickle here. So, you can see this is user scratch and then you know my, whatever it is, it's in my directory there
and this is what's happening. There's some nice kitty photos there. I'll show you how that's
working and if you click into one of them, you get
a nice little gallery here and you can switch between
the different kitties and you can see the text
that the user submitted. That's kind of where
we're going with this. That's what we're planning
on doing. Very nice setup. Simple one little pager
application because I'm using some APIs to be able to
do that here locally. I'm using, remember APIs, not Web APIs, but I'm using a View as the
framework that I'm using. I'm using a framework called View and it has an API and I'm also using this Silent Box which is allowing
us to do that popup. It also has an API. Let's take a little bit of a look here. So I'm gonna move a little
bit slow through this just so in case it was your first time
seeing something like this. I've got some setup here in this head tag. You can see this html,
this is the head tag. There's some setup. So I'm using View and
I'm also using Silent Box and I've got some very minimal styling. It's not my forte. And oftentimes you're
given a template like this. So you're given, hey,
here's a working thing. I would love for you to
get some APIs in there. So the body of the app has this. You'll see notice this little mustache, mustache and it says call to action. So in view this is part
of their API is if you use this for a template,
it will be replaced with something from the View Objects data. So you can see here,
there's this call to action and that's what this is and
this is why I can change this and make this say whatever I
wanted to say it would be here. So whatever we decide to do with our apps, whatever kind of pics that
we're trying to collect, that would be where we would change that. And then you also see here, there's this silent box
and it's doing a gallery. And the way that that works is
we pass in this gallery from, again, from this View Objects gallery. You don't necessarily need
to worry too much about this, but I wanted to show you that there is, this is how View works,
it's a front end framework and it provides an API where
if I give it a function called data in whatever's in
here will get returned to it. And then there's some more, I can define some methods
on the view object. One of those methods that I've defined is called load images. Part of the API that
View creates is there is a lifecycle method called
mounted, which means that when the application
is ready and it has been mounted onto your HTML
through the JavaScript, it will call this function. So it's gonna call this
load images function. In this load images
function, you'll notice it's an async image and I've
got some to-dos in here. This is someplace where you might be communicating back
and forth with people as you're working together on a project. So use the messaging API to
use submitted photos and also create a web-based API that
matches this expected response. So that's what we're gonna do over the next couple of videos here. So what we see in the start
here is there's this gallery and it is an array and it's
got some stuff from this. There's a website called
Place Kitten that I used here. So you can get different
versions of kitties here. And there's a description
and there's an alt tag, which is important because
for accessibility reasons, this is what it will say on the picture. So that is what is happening
to be able to make that work. So we now have our app here locally and we can change things. So one of the things, one of
the photos that I want to do, I love to get photos of
burritos from around town. So I'm gonna change this. I'm gonna say submit me a photo of your burritos and I'm
gonna save that file. So see it's not saved, I'm gonna save it. When I go back to my file there, when I refresh it, you can
see that it says "Burritos." What are you going to want to gather? Why don't you go ahead and change that, change that to whatever
it is that you're wanting to gather as we build
those projects through. And of course you know you see that you can change that however. So make sure that it's
downloaded and make sure that you can change that,
that you can change this file and it opens locally on your machine. Cool, and so now we have a little smattering of APIs here already. So we have a web, we
have HTML working here. We have this view and this view API has a very specific API that's
doing this mounted here. But remember it is actually
an API and we're going to use a web-based API to be
able to get this information and we're gonna do that
here in just a bit. Now that we got our file all
working, let's deploy it. And by that I mean let's get it up on the public internet so
everyone can see it. That is of course after
you take a quick break. (upbeat music) We are gonna get our webpage up on the internet so others can see it. And this has gotten much
easier as time has progressed. You used to have to set up a server, like a physical computer,
buy a domain name and configure it to point to your machine. You had to figure out
where to host, like where to locate your server so
that it was always on. And arguably the hardest part
after it was live, you used to have to watch over it in
case too many people came to it. You didn't want it to get overloaded, you wanted it to scale up and
be able to handle the traffic. Those servers are still
around but these days you don't really need to
worry about them too much. Now I'm sure that you've heard the term the cloud and the colloquium. The cloud is just other
people's computers. Well let's talk a bit about serverless. Serverless is just other people's servers. It removes all those
previous things that we had to worry about and it
offloads your concerns. I can tell by the look on your face that it's probably better
if I just show you, let's get this application hosted. So we're gonna have Twilio
host our code for us and that is to say we are
going to have Twilio be our web server that will
be used to serve our HTML. Our project will be serverless. Now the way you do that is
by using Twilio's serverless environment, which is here
under functions and assets. Now if you don't have
that here, if you click Explore Products and you
come to Developer Tools and you come over to Functions and Assets, you can click this little pin icon and that will make it show up here. So I am going to create a new service. So I'm gonna go Functions
and Assets, Services, and I'm gonna say Create Service. It could be whatever you want. I'm gonna call it pickle, like pick your pics with Pickle Peter. Services allow us to group our functions and assets together for our application. So I'm gonna click Next
and what's gonna happen is we're gonna open up to a very nice IDE that'll allow us to edit our code. Now a friendly reminder, if
you're having a hard time following along because
my screen looks different than yours, you are using a
new and improved experience. So check the notes for
what might be different. Now traditionally these services here are used to power Twilio
based applications. Remember how I said you could respond programmatically to an incoming message? Well, functions are a
great way to do just that. In fact, our current number
has a default response and we might as well fix it
while we're here, but before we do that, let's get our
HTML code up and running. So what I'm going to do
is I'm gonna grab code from my local machine and if you want to, you can just grab it from GitHub, check the notes for more on that. But I'm gonna go add, I'm gonna choose Upload File, I'm gonna find my file, my index html and I'm gonna choose Open. Now what we're uploading, we'd like the world to be able to see it. So, I'm gonna choose Public and then I'm gonna choose Upload. So now this files over here, you'll notice this little green dot. And this means that it is not yet deployed and that is, it's not yet available on the internet in this current state. So let's do that. I'm gonna do that by clicking this Deploy All button down here. And now we see that
it's green and I'm gonna go ahead and choose copy URL and I'm gonna open up a new tab with that there. And we will see that our site is live, except it says burritos
and these are kittens, but we're getting there. So it's working, it's
up, it's on the internet. I could share this with people. The pickle site is up and
running on Twilio's servers. One of the things that I used to have to worry about was scale. Like what if I got a
whole bunch of requests to this site, would it fall over? What the serverless solution
is doing is allowing me to not need to worry
about any of that anymore. Twilio is handling all those
concerns for me, which is great 'cause now I can focus
on what I was building. Which by the way, we need to handle that reply programmatically, right? So the way that Twilio does
things is with web hooks. Now if you haven't
encountered web hooks before, I have an entire course on them
that I link to in the notes. Web hooks are sometimes
called a reverse API. That is, instead of you calling
the API, the API calls you. So let's configure our number to make use of the right web hook. So I'm gonna go back
to my number over here. If I look under phone
numbers and I do manage, I'm gonna hold down command or control and click Active Numbers,
I'll open up a new tab. Nice little hack to keep
your screen open here. So I've got my numbers
here and if I come in here to configure it, what happens
is I'm gonna scroll down. So here's the voice
section and then here's the messaging section and
it says, when a message comes in to this web hook and it sends to this URL here, it does
a post to this URL here. So the way that Twilio makes use of web hooks can be thought of like this. You know when I hit this URL, right? This URL in my browser,
my browser doesn't care about what's happening at that endpoint. It could have been
anything, any web server like Express, Jingo, a Java
server, it doesn't matter. What matters is that
what was returned from my server was HTML or
hypertext market language. My server responses with HTML and my browser renders the page. Now the same is true with Twilio. Someone is going to text our Twilio number and Twilio is going to send
a request to an endpoint. In this case, this endpoint
here, it doesn't matter what is happening on the other side
as long as it returns TwiML, or Twilio markup language,
they look very similar. HTML and TwiML. Twilio will be able to
render your application. So we could set up a new web
server to host this application that returns TwiML or we could
just use a Twilio function. And like I said earlier, that is what these are commonly used for. So let's pop back to our service. So I'm gonna come here, I'm
gonna add a new function and I'm gonna name this
function Incoming Message 'cause that's what we're gonna do. We're gonna handle an incoming message and there is some very
nice default boiler plate that is commented that comes through. So boiler plate is code that's provided. That's usually the most
common thing that you're going to be doing and in this case
it is, it's boiler plate for how to respond to
an incoming phone call. It's kind of like the hello
world of voice applications, but we are gonna be building
a messaging application. So we'll need to tweak this just a bit. Now I've put this code, I'm about to show you into the notes. So I don't want you to
feel like you have to type this all out or even fully
understand every line. I'll step you through it, first though, let me walk you through
this function just a bit. So Twilio functions all export
a thing called a handler. And that handler takes
a function that takes some parameters, context,
events, and callback. Context here is an object
that holds information about the function that's running,
like it knows the domain, it knows the name of the
function and the event here, you can kind of think of
this like a web request in most frameworks and if you
haven't seen a framework before, this is kind of the way that information is passed into your web application. So, this is the event will hold everything about the text message that was incoming because that's what Twilio does. Twilio's going to pass that
information through here. And for instance, that message will have the to, it'll have from and body. And again, because when
the text message comes in, we are going to point our
phone number to this function. So Twilio will post the information here, it will call our function
instead of us writing code that checks if a new message
was added over and over again. Twilio is gonna call us. The API is going to
call us via a web hook. Web hooks are pretty
cool. Check the notes. And then finally, there's
this callback object here, which is how we send
information out of the function. It's actually a function,
so we have this callback, this is the errors that
might have happened, and then this is what gets returned. And here's that TwiML,
Twilio markup language. So I'm gonna get rid of a
couple of these lines here. These are sort of demo lines, I'm gonna get rid of that and I want you to be able to see what's coming into the message. So I'm gonna start up here.
I'm gonna do a console dot log. And what what this does
is when the function runs, if we want to, we can see the message, it will show up down here. So let's say that we
got an incoming message and it was incoming
message and we'll just do a colon and then I'm
gonna use this dollar, this style of string interpolation. So I have the event object, and on it there is a property called
body with a capital B. So that's being passed in there. So when the function runs, we will see that the message came in 'cause Twilio's gonna pass that message
and we'll see it there. And we're just gonna say thanks
when somebody sends this in. So we don't really need to do
anything with this message, but you might wanna
filter it or handle things differently based on what they said in the message and you totally could do that. But you probably also wanna
check the photo that came in was actually a burrito or
something, not inaprops. You could do that and
there are APIs for that, but that's a little out of scope. So instead of a voice response, we're actually going to
return a messaging response. And there's a little
helper library here, right? So a little helper library for TwiML and it has this TwiML object. And before it was doing say,
which is text to speech. So if you wired this up, it would say hello world
in like a computery, but actually pretty good
sounding voice these days. But I'm gonna change this to be a message 'cause that's what we wanna return. We wanna return a
message and we wanna say, thanks for your submission, right? We wanna thank them there. And we can also send
any sort of emoji here. Let's see if maybe a camera
that sounds, yeah, it's nice. Thanks for your submission. And so what's happening
here is this object, it's a fluid API. It means that it doesn't return anything. You kind of tweak it and it
builds as things go on it. So you'll notice that this
isn't returning anything. I'm modifying this object
and then when I send it out at the end, that's how it goes out. So let me, let's just, let me show you what
that object looks like. So again, I'll do one of these console log and use the back tick and we'll say TwiML. So Twilio markup language was TwiML. And you'll see that it
looks a lot like html. There are some rules to it, but we don't need to
learn them all right now. So I'm gonna save this
and just like before, you'll notice that this is
gray, it hasn't been deployed. So I'm gonna click Deploy All and while that's building, I'm gonna head back to my phone number page and
I'm gonna refresh it. So on my phone number
page, I need to change my message down here it says,
when a message comes in, we want it to be a function
that is in the pickle service. That's done in the UI. And we want to choose incoming message, which it hasn't finished deploying yet. Just finish deploying, one more time. Let me refresh that page.
So that shows up for us. We're going to go to,
when a message comes in, it's going to be a function
and it's on the pickle service for this UI and we wanna
do incoming message. And if we do save, alright,
so we should be all wired up. I'm gonna click Clear Logs here, and I'm gonna turn live logs on. You can see that this says
live logs on when it's ready. And I'm gonna clear
the logs one more time. And what I'm gonna do now is
I'm going to send a message in and we should see this, we should see what I send in and we should see the TwiML that was sent back and I
should get a response back. So let me send that message
here. Let me send this text. All right. So, oh, check out this. I have this beautiful
picture of a burrito. I love when burritos can
stand up by themselves. And this is an awesome one.
I'm gonna send this in. So check out this beautiful
burrito, little emoji. I'm gonna send that through
and we should see here in the live logs, we should see
the message come through. There we go, so look at
this beautiful burrito, and this is the TwiML that was generated. So you can see it's like tag-based. So there's a response and
there's a closing response and there's an opening
message and a closing message. Thanks for your submission. I don't want you to feel
like you need to learn TwiML. You could do that later if
you need to, but this works. So I got my message back. Now, remember, since we are in trial mode, if somebody else sends in a message to your phone number,
they're only gonna get a message back if they're
a verified sender. So that is a limit of the trial API that we're using currently. Now most APIs have limits. There's only so many calls you can make. There's, you can only
send to verified numbers. There's just different sort of limits. And that's what we're
working with here right now. The limit is that you can
only send to verified numbers. They can still submit,
they just won't get this "Thanks for your submission." So your phone number should,
so when you submit from your phone number, you should
get it just like I did. All right, so we're looking good. We have our site hosted and we are handling submissions by thanking them. Let's get to some more cooking. Now, if you're interested in learning more about applications like
this over the phone, check out the notes for more resources. I have an entire course on this if this piqued your interest. But for now, let's get back to our API. Now, with our ability to
host our own application, we can focus on designing our own API. Now the great news is that
Twilio functions makes it really straightforward
to return JSON, remember, that's JavaScript object notation, the lingua franca of the web. Let's design our web-based API to return the expected format, and we can
make use of Twilio's message API to get a hold of all the
messages that we received. Do you see what I did there? Get, get it? All right. I'm a get outta here. I can't stop. All right, let's do this. Okay, so we are gonna
actually write an API and we already have a spec
or a specification, right? We need to provide for
this specific plugin, This silent box has this gallery plugin and it has a specific API that it defines and that API looks like this, right? So remember that we're
setting this gallery and we're setting an array and we're
setting this information here. So I think we should start
by creating an endpoint that returns exactly what we have here. We should return an
endpoint that does this, the returns this, and then
we'll move forward from there. This is what I do when I find
myself in a situation when I'm working on a project
with a team of people, I take what they expect in a template
and I return it from an API. This way they can keep working
and I can keep working too. So let's do that. I'm gonna
create a new function. So I'm gonna choose add, add function, and I can name this whatever I want. And I suppose we should be clear, right? We're gonna make an API,
we're actually gonna make one so slash API and then I suppose we should probably say what it's gonna be. So we'll do a Pics API here, right? And I'm going to press Enter and that will get me my boiler plate code, of which I am going to
get rid of everything. So thank you for the help. We're not actually
returning TwiML this time. We're actually gonna return an object. And what I'll do is I'll copy the hard coded array from
this index file here. I'll come in here and
I'll copy this hard coded. Now hard coded means it is just like in the code this way, right? There's no way that this
is going to be dynamic. I'm gonna change that here.
I'm gonna paste that in here. I'm gonna name it the same thing. So I'm gonna create a new
variable called gallery and I am going to just paste
that hard coded code there. There we go. And then I'm
gonna call this gallery. So again, I have an array. That's what this bracket here is an array of these objects, that's
what these objects are. These mustaches, they
open up and the objects have these properties here and these are representing the pics
that that plugin requires. And now I'm gonna use
this callback function to return that gallery array. One really nice thing
about this Twilio function is that if I pass it an object like I did, it'll automatically return JSON to anybody who requests the URL, so let's do that. So I'm gonna go ahead, I'm gonna save this and
I'm gonna deploy it. Now one thing to note, by default
it was actually protected. That's what this little
key lock thing means here. So I'm gonna click this
and I'm gonna change this to be public 'cause we
actually want anybody to be able to see it, not just Twilio. So this is what we're gonna do. I'm gonna change this to be
public and then I'm going to choose a deploy all and
you'll see that it's gray and when it's ready it
will turn green for us. And so I'm gonna go ahead
and I'm gonna copy this URL. So I have this URL already
and when it's green, when this goes to be deployed,
so it's still deploying, you can see it's deploying
and you'll know down here when it'll say build completed
and it'll say deployed. So it's deployed, so I
copied that URL, I am gonna go hit that URL and let's
see what we get back. Awesome, we got it. So we got the kitty descriptions and blow this up a little bit here. This is JSON, it automatically
built this for us, right? It's in the right format,
which is very nice. In fact, we could probably
take this and why don't we, we'll go over to the Thunder Client and take a look at what's
going on over there. So I'm gonna come back
to my Thunder Client, I'm gonna make a new request
and I'm gonna hit, I'm gonna do a get to this API that we
just built and check it out. It comes back, it comes back with 200 OK. And here's, the stuff that's coming back. There's even some headers
in here. Oh, sorry, some. If we look at the response, we can look at the response headers
over here and we can see that the content type was
set to application JSON, Twilio always sends back to the shenanigans none, which I love. So now what we could do
is we can give this URL to the team that's working
on making the front end, you know that view application, they could wire it up,
they could take this. And as long as we match the
same format in what we return, that is, as long as our API
maintains the same contract, everything should just work. So that's pretty awesome, right? So let's move on to the next part. I'm gonna comment out this bit. So let's go ahead, let's
give it a, we'll we're gonna go ahead and make
this an empty array, right? So that's how you make an empty array. And I'm gonna comment this out so that we have it so that we can kind of look at what the format is as we build stuff here. So I'm gonna comment that out and in fact I don't think I need the second one. I'll just get that first one there and give us some space there, awesome. So now let's use the text messages that were sent in, our incoming messages. So we are gonna write
some JavaScript code. Now if you aren't quite
fluent yet in JavaScript, remember that is okay
and we've all been there and we all, all of us, I guarantee you everybody watching this understands that what you're going
through can be challenging. It's a new language. I want you to try a
follow along conceptually. And I want you to take
your time and I want you to take advantage of being
in a video-based course. This code that we are going
to write will be available in the notes and I will walk us through it and then I'll go over
it again translating it into the concepts that we've covered. Okay, are you ready? Let's do this. So Twilio functions have
another great feature. I can get access to a REST client, to the Twilio REST
client then authenticate a Twilio REST client
from the context object. So context, get Twilio client. Now remember that is going
to be using my Auth token and my account SID, and
it's on this context, it just automatically is authenticated, which is really powerful
'cause now I can get access to my thing because this
function is running as me, right? So that's why it has
access to that information. So remember we wanna get a hold of all of the messages that were sent in. So we're going to use the API to do that. And remember we could have
multiple phone numbers. So I'm gonna get the messages that were just sent to this phone number. So I'm going to await 'cause remember it returns a promise. So client dot messages dot list. And I need to do the ones that are specifically to my Twilio number. So that's (561) 816-5433. And I'm pretty sure that's right. I'm gonna look one more
time at my, oh there it is. Yeah, that's it. So that's
my phone number there. (561) 816-5433 you could go. So there, it's also on your console. Remember down here at the bottom, (561) 816-5433, that's what I wanted. I put that there and in fact, you know, that's something you can
have multiple numbers and that might be something that you want to store possibly in an
environment variable. So I think we should probably
do that. Let's do that. So I'm gonna take this number here and I'm gonna store that here. You can see it in the
functions and the services here we have this environment
variables, let's add to that. And you'll see here, actually
add my Twilio credentials. My account said my Auth token
to M, so that's why context get Twilio client works is
because we've checked this. If not, it won't work. So, but it's checked by default. So we're gonna do Twilio
number and that value is going to be that and now in my code, what's rad is I can use that like so, I can say context dot Twilio number, I can access anything that is
in those environment variables that way and it's now it's in this code. And now when I share this code,
you won't need to do that. You will need to set your
environment variable though. Awesome, so, and now what
we've gotta access to the, well actually first we
set await and we need to make sure that this function is marked a sync so that that's required, right? In order to make this work. So now it's going to get the messages, it's going to return the messages, and now we're gonna loop
through those messages. One of my favorite ways of
doing that is this for of loop. So we're gonna say for
message of messages. And for each one of those messages, we're gonna go through some things. So one thing you might not
have thought about before is that when you send a message,
you can put multiple photos. I think typically whenever
I send, when I just send one or then I send another
message and another message, you can actually add multiple
pictures before you send it. So let me, let's do that. Let's get a hold of all of the
pictures that are available. So we'll say comp pics, we'll call, we'll call our variable called
pics, right, for picture, short for picture and
we'll say, await message. Now the message object that
came back from this API. Now we know that this was an
API call, but it is an object. And that object actually has
access to these sub resources, which was media, which we
walked through this before, remember where there was the media URL and we grabbed that
media URL and we looked at all of them that were available? This is basically doing that same thing. And we're gonna get all of
the media that is available. All right, so we have
that, we have the message, we have all of the
pictures of that message. And so for each of those pictures, right? So each of the pictures,
we need to actually need to declare the variable
just to be better there. So we'll say for const,
pick of pics, right? So we're gonna make a new variable called pic looping through each one of these that came back from this array, right? So, for all of the messages,
for all of the pictures in the messages, now what we're gonna do is we're gonna add that to this gallery. So this is an empty array, but we're gonna dynamically add to it. And the way that you add
to an array of course is with gallery dot push, we're gonna push a value onto the end of that array. And we know what this is
supposed to look like, right? It looks like this, it looks,
we have this source, right? So source here, SRC is short for source just from
forever in the internet. So image source, SRC and
I know from my notes, and I'm gonna pop over here real quick. That this has, the media
resource has this thing called a URI on it and it's relative
to this https.twilio.com. So let's paste that. So it's relative to that, which means I that if
I'm going to display it, I need to let our people know I'm gonna give it a full URL,
which it requires, right? It requires this full URL. So it's got the front part of it. And then I'm going to use the pic as a property called URI, which we saw. And remember what happens
is it has this content type if we want to without an
extension, the media is returned. Now I know that by default this is going to give me this pic.URI is
going to end in dot JSON. So I wanna replace that, I'm gonna use the string method to
replace the dot JSON, right? I don't want that dot JSON, I want it to be no extension at all. So I'm gonna use this empty string. So I'm gonna replace the end of what this pick was with dot JSON. I'm gonna replace that
with an empty string, which will remove it essentially, right? That's what we're gonna to do. Now I'm gonna do a comma
'cause I want to do more, I want to have the description. We wanna put the description
here as required because that's what the little text
is at the bottom that it says, and that's whatever they texted
in, in their message, right? So I'm in this loop, I'm
looping through each one of the pics, but I'm also, I
have access to this message 'cause I'm in this inner loop here, right? So I still have access to the outer loop, which is message dot body, right? So those are inflated. So that's whatever the text
was that somebody sent it in. And we should also, we'll
make that the alt text too. So alt tags are handy for
accessibility reasons. There are people, you
might not think about this, but there are people who are
going to use your application that are using it without
being able to see, some people are vision
impaired and they have screen readers and alt
tags are awesome for that. You always wanna make sure
that you make things accessible for people who can't see what
it is that you're providing. And alt tags are an
excellent way of doing that. This is just one way that
you can make your application more accessible and everybody
wins by it and then finally, I'm just gonna grab this last thumbnail width here, 200 pixels. We can see later if people want something different than that, what to do. So, our gallery array for
each one of those pictures, it's gonna add to it, right? So it's gonna go and
it's gonna add each one of those and we're still
gonna return that gallery. And I think y'all, I think we got it. Let's walk it one more time. Okay. So we're gonna come in
here and we are going to use the context that was passed in to this function when it was called. So when somebody hits
this URL, this function is gonna run and it's
gonna know it's gonna have access to those environment
variables that we saw. It's gonna get access to
an authenticated client and that client is logged in with my account SID and my Auth token. And we're gonna create an empty array, this gallery thing here, we're
gonna create an empty array. It's a list that we're going to populate. We're gonna take our
messages and we're going to push them into this
array so that it has the format that is expected,
which is right here. We're gonna turn what our
messages look like into this so that later if we can use them that way. So the way that we do that
is we use this client, this client is a REST
client and it's gonna hit the messages endpoint and
we know that it's going to do a get, but it's
been abstracted for us. So just, we're just say,
hey, list all of the numbers that were sent to this
Twilio number and those are, this context here, again,
this is passed in and the Twilio number is set in my
environment variables over here. So we're set 'cause because
you could have multiple, right? You could have multiple
Twilio phone numbers. So we wanna say only the
ones that were sent to. So we're very, we're being very specific. We're querying messages that
were sent to this number, not from this number but to this number. And we're gonna loop through
each one of those messages. And for each one of those messages, the object that's returned
from this has this property called media, which lets
us get to a sub resource. And you'll remember in the
JSON, there's a link to this and we could go and query
this ourselves, but we don't need to because the API
has wrapped up for us. It's very nice, it's
nice, nice abstraction. And we're going to get
the list of those picks. And again, this is asynchronous. We're using this, we're
waiting for it to come back, we're waiting for these
values to come back. So once we have these picks, we're gonna loop through each of the
pick and we are going to push out a source that has this. We know that they all need
to start with API twilio.com because the URI itself, this
URI here is relative meaning it doesn't contain the
forward slash of this. So we are going say
this is where it lives. This is the API call that we
want you to do to get this content is API twilio.com,
whatever is in the pick URI 'cause that's unique to
each one of the pictures. And that URI comes with
a JSON at the end of it. So if you look here,
let's see if we look here, we can see that it ends
in this dot JSON, right? And we want to get rid of that
'cause when you do get rid of it, what happens is it
returns the actual picture. We did that, I don't know if you remember that earlier, we did that. So, that will be removed
and then we're gonna use the message and the message
is coming from here, right? So the message for each of
these messages, we're gonna get the message.body and the
description and the alt tag for it, the alternate
text we're going to set. And that's from that,
this is the required for, remember this looks exactly
like what happened here. So we are returning that here
and it should return JSON. I'm going to save it. We
are going to deploy it. We are going to cross
our fingers because this, we are at that point where
we hope that the code that we wrote works and
if it didn't, it is okay, if it didn't work, we are
gonna work through it. We might get an error, we
might not understand exactly what that error is and we
are gonna work through it. But I am going to save this and deploy it. Now, let's assume that I gave
this out, I gave this out. So now if somebody hits
this API, here we go. So that's what it was before. If we hit it, we should
see burritos. We got it. So it says, "Look at
this beautiful burrito." I texted that in. Wow. Look at the clarity of the burrito. Oh my gosh, you can see the
rice in the burrito emoji. That's impressive. I didn't know that. Look at that cat. All right. So in fact let's go,
let's go hit it with our, let's hit that same
request I wrote before. It should be a little bit different now. It's coming across here and I want to look at the response and the response. I'm gonna go and I'm gonna grab this URL and make sure that it works. So the source, right, the source that came back here is, should
be the picture of it. And if we look at it should
see my beautiful burrito. Oh look at this thing,
I believe that burritos, when they can stand up by themselves, that's the sign of a good burrito. Look at that burrito.
I got that in Arizona. Oh man, and what we did with this code is actually pretty common,
now in an app like the one that we're building,
probably eventually what you're going to do is you're
gonna store those photos that were submitted
into a database, right? And you're gonna do that from this incoming message function. You're gonna get it, you're gonna store it if it's valid, if it's a valid picture, you don't wanna show pictures that aren't, you're gonna store it
in a database and then you're going to format it
for whatever your client is. You're gonna get that from a database. So maybe instead of
coming back from this API, you're gonna come from a database API and you're gonna pull
back your information and then you're gonna push it through. And that database is gonna
be in its own format, but you're going to make
it match whatever it is that you are trying to push out there. You're not gonna, it's not gonna look exactly like the message, right? I'm not gonna send back
one of these messages and make my API look like that. I'm gonna shape the data.
That's what that's called. I'm gonna shape my data in the
way that I want to be used. And we came with the spec.
This is the shape of the data. So we took the data and we shaped it, we formed it into what was expected. All these burritos are making me hungry. I think I'm gonna go fetch
one from my favorite taco-ria. Now I'll make sure to snap a pic. You should get one too
actually. You deserve it. You deserve a burrito
and when we get back, we'll look at how to fetch this data that we just generated in our client app. So we've coded our external public API and it's ready to be consumed. Now our API uses an external API, Twilio, and we're going to need to use our web framework Views API
to retrieve the data. And to do that we're gonna
need to use the web API Fetch. See, APIs are everywhere. No wonder you came
looking for this course. All right, let's make use of our server-based API and our
client side application. All right, so just like I
just consumed my burrito, we are going to consume that
API that we just created. So if I scroll down here,
remember we're passing in this gallery here
and we scroll down here into this load images and this load images gets kicked off from
the API of view, right? So view has these lifecycle APIs and when the things mounted, it's
gonna call this load images. We're gonna come into load
images and now we have some to-dos that we have already to done. So we are going to use the messaging API to use submitted photos. We did that, we did that in our API and then we are going to
create a web-based API that matches this expected response. We also did that, didn't we? We did that. So let's get rid of that. All right, so here we go. So this has got a suggestion here of what to start doing here. So I'm gonna uncommon this. So we're gonna create a new
response object and we are going to await and we are going
to use Fetch and Fetch here is part of the web API that
browsers must implement to do exactly what we're
trying to do, right? We want to fetch data from our API. Now this happens to be on the same server. So we can use a relative link
like this slash API here. We don't need to specify
the server, right? It's assumed. So our API,
we called that, right? We called it API/pics. So slash pics is what we
are going to hit there. And you notice that it's using await because this is an async function. So Fetch returns a promise
and it's going to return that response and that
response has a method on it called JSON that will actually return the JSON representation
of whatever came back. So what I'm gonna do is I'm gonna get rid of this gallery, this hard coded gallery that is gone and I am
going to say REST await. We are going to await 'cause this method is also asynchronous, response dot JSON. So that's gonna get back whatever is in this response that came back. This response has all
sorts of metadata about it, but we just want to
get the data out of it. And that's by using this dot JSON. And because our API is JSON enabled, it's just gonna come out. All right, let's deploy it. I cannot stop. Oops, this is not unable to
deploy 'cause I didn't save it. So I need to save it first. I cannot stop thinking about
that burrito. It was so good. I submitted a selfie of
myself and I texted it to my Twilio number and I got a reply back from my Twilio trial account, right? And it says thanks for submitting it. So if all goes well when we look here, I'll be able to show you the burrito that I texted to my number. So it's been deployed and
I'm gonna come in here under this assets and
I'm gonna copy this URL and I am going to paste it
here and this view application is gonna go and it's gonna
hit my API and it's gonna bring back some photos into
this gallery and here it is. Look at the size of this thing. It was truly bigger than my head. So if we click that, we could go, we could see my other beautiful
burrito there as well. Now let's look again back here
at the client side of things and just take a look at
how beautiful this is. It's just two lines and
it's hitting our APIs and that's the power of this API. We were able to hit an
API and get user submitted text messages, text photos, right? And it only took two lines and really it only took one line actually. You know, like if we could have like chained some stuff on top of this. Awesome, now one thing that
I do wanna note is that there's no authentication
at all to this API, right? I didn't supply any
authentication information at all. It's open to everyone and
that's kind of a good thing if you are working on a
client side application, you don't wanna pass your keys around. Like I would not wanna
put my Twilio keys here on this page because I
don't know if you know this, but you can actually see
everything that comes down. So I'm gonna view the source
of this and you can see here's the source that we're looking
at and if I hadn't used any sort of API keys, I
would see them right here. You don't wanna leak your
keys that way, check the notes for more information on
how to get around this. But typically this is
what you do is you write a server that then the server keeps track of all the keys and you
connect to the server. But if you do need to
provide some authentication locally on the client,
there are ways to do that. Check the notes. But look
at this, look at this. You did this, you have
designed a new interface, a text messaging interface, right, a TMI. Well I hope this wasn't TMI or also known as too
much information for you. You learned a whole lot about APIs and not just the web-based ones. You saw them in practice and
you even built your own one. You really deserved that
burrito. Awesome job. You've just built and
consumed your own API. Now here's my question to you. Do you think that the API code that we wrote together should
be considered RESTful? Well, why don't we take a look at our weathered scavenger hunt card. So it's definitely a
client server architecture. Our client happens to be, in this case, a view application running in the browser and our server is a
serverless node application. But any client could connect and use this. Statelessness. It's
definitely stateless, right? We aren't requiring any prior knowledge about the client, cacheability. Well, at the moment we
aren't providing any caching information,
though we could, right? We could fairly easily pay
attention to those headers coming in and we could
respond appropriately. It would require us writing
some additional code and thinking through
some of the edge cases, but we could do it. Let's put that in the maybe column. Layered system. Yeah, for sure, right? In fact, it's a little layered already. Our API is calling another
API, but our client doesn't need to know that,
we can also add additional functionality and the
contract wouldn't change. Code on demand. We haven't
even talked about this one yet. And it's the only optional requirement. Basically this means that
your API returns code that is runnable, like maybe it returns an embedable widget or some
actual JavaScript code. This doesn't make any
sense in our use case and that's totally okay. So we're gonna drop this
one into the no column. So we're looking good so far. But here comes the
doozy, uniform interface. So remember this one has four subsections, resource identification
and requests, ruh row. Currently we are just
representing all the messages as objects and absolutely
no way to identify them. So we failed this sub requirement and therefore this is a no. But let's keep going
through the rest of these, pun intended, sorry. Resource manipulation
through representations. We definitely do not allow any sort of manipulation of the images
so this is another fail. Self descriptive messages, we
haven't gone over this yet, but by using headers we
can tell that this is JSON. The message sent down
has a type and it's clear that it should be JSON decoded to be used. Hypermedia as the engine
of application state. And last but certainly not
least, HATEOAS or HATEOAS, it's an often forgot about
part of the RESTful constraint. And the idea here is that
there are links to show off what more you could do with
this and where you could find related resources,
it provides URIs or links. And we did see this in both
the Spotify and Twilio ones. However, ours doesn't provide
links to other resources. So we don't have a RESTful
API and that's okay, it's gonna suit our needs. It does look like we could get there pretty quickly if we wanted to. One thing I want you to gain
from that exercise though is that you now have the ability
to identify whether or not an API is RESTful and I
hope that felt pretty good. We've now completed the scavenger hunt, we revealed all the constraints, and I hope most of those are pretty clear. Please don't feel like you
need to memorize those. You can find those same constraints littered all over the internet. Now as a prize for finishing the constraint scavenger hunt, I've dropped links to my
favorite REST API constraint documentation for you to
lean on, should you need to. I've also included links to
the Popular REST API frameworks that will help you design RESTful APIs. Make sure to check out
the notes. You did it. You just completed a
whirlwind introduction to APIs and I hope that you can
see how much more power they can add to your programming journey. By looking at interfaces in general, I hope you're more comfortable
with the idea of not fully understanding exactly
how something is working, but still leaning on that abstraction to build your tools and applications. Do this all the time with
physical object interfaces and APIs or application
programming interfaces. They aren't all that different. I hope you enjoyed taking this course. I know I had a lot of fun making it. If you think someone
you know might benefit from this course, please
share it with them. I'd love to hear your feelings,
your thoughts, your dreams. So I threw together a
little something using a smattering of APIs to
capture your feedback. If you've got the time, I'd love to have you answer a quick text-based survey, text "feedback" to the
number on your screen. Well actually, you know what, if you want, you can also call and just
leave me a message too. I use an API for that too. So please, please, please
keep me posted on your journey and really, I can't wait
to see what you build. Thanks again for hanging out
and we'll see you real soon. (upbeat music)
