This course provides a comprehensive introduction to Application Programming Interfaces (APIs) for beginners, covering their fundamental concepts, practical applications, and how to interact with them using various tools and programming languages. It emphasizes understanding APIs as interfaces that abstract complexity, enabling developers to build powerful applications by leveraging existing services.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
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,
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)
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
