What is an API? Understanding the Basics
An API (Application Programming Interface) is a contract that defines how software components should interact. Interfaces are all around us:
- A radio has knobs (interface) to change volume/station, but you don't know how the internals work.
- A graphical user interface (GUI) on your phone has a play button, you press it, music plays, but the implementation is hidden.
Similarly, an API:
- Provides a set of tools for developers to use.
- Abstracts away complex implementation details.
- Uses a contract, you call it a certain way and expect a certain result.
"Interfaces abstract away the implementation. An API is a contract of sorts, it defines how it is expected to be used and what you can expect to receive."
Types of APIs You Already Use
- Programming Language APIs, e.g.,
string.toUppercase()in any language. - File System APIs, same code works on Windows and Mac because the API abstracts the OS.
- Web Browser APIs, your web code works in Chrome, Firefox, Safari thanks to standard browser APIs.
- Frameworks & Libraries, add routes to a web app or make an image black-and-white with a single method call.
Remote APIs & Why REST Changed Everything
A remote API lets you control something over a network:
- A TV remote changes channels without getting up.
- A song-identifying app sends a snippet and gets results from a huge server database.
- Google Translate uses massive processing power elsewhere to translate in real time.
After years of clunky standards, REST (Representational State Transfer) emerged as the clear winner. It's so popular that "REST API" is almost synonymous with "web API" today. For a deeper dive into understanding APIs and building your first AI assistant, check out Understanding APIs and Building Your First AI Assistant in Python.
How the Web Works (Quick Refresher)
| Term | Meaning |
|------|---------|
| Client | Your browser (or your code) |
| Server | The remote computer holding data |
| URL/URI | The address of the resource |
| HTTP | The protocol (contract) for communication |
| HTTP Verb | GET (retrieve), POST (create), PUT/PATCH (update), DELETE (remove) |
| Headers | Extra info like auth tokens, content type, caching |
| Status Code | 200 OK, 404 Not Found, 500 Server Error |
HTTP is stateless, each request is independent. State (like login) must be sent with every request, usually via headers. You can learn more about the fundamentals of testing these interactions in Comprehensive Introduction to API Testing Fundamentals and Tools.
RESTful APIs in Practice
Core REST Constraints (Your Scavenger Hunt)
Client-Server Architecture, Your code (client) talks to a remote server. ✅
Stateless, The server doesn't remember you; you send credentials each time. ✅
Resources, Everything is a resource (a book, an author, a photo). You interact using URLs. ✅
CRUD via HTTP Verbs
| Operation | HTTP Verb | Endpoint Example |
|-----------|-----------|------------------|
| Create | POST | /artists |
| Read | GET | /artists/{id} |
| Update | PATCH | /artists/{id} |
| Delete | DELETE | /artists/{id} |
Representation, Data comes back as JSON (JavaScript Object Notation), which is easy to turn into objects in any language.
Cacheability, Responses can be cached to improve speed (Spotify uses this heavily). ✅
Layered System, You don't care if there are caching layers, databases, or other servers in between. ✅
Hands-On: Exploring Spotify's API
1. Using the Interactive Console
- Go to developer.spotify.com and scroll to the bottom.
- Click Developers → Docs → Web API.
- In the left sidebar, choose Search.
- Fill in:
q = Beyoncé,type = artist. - Click Get Token (you may need to create a free Spotify account).
- Click Try It, you'll get JSON back with artists.
2. Using curl from Your Terminal
curl is a command-line tool for making HTTP requests.
Check if it's installed:
curl --help
To replicate the Spotify search:
curl -X GET "https://api.spotify.com/v1/search?q=Beyonc%C3%A9&type=artist" \
-H "Authorization: Bearer YOUR_TOKEN_HERE"
What you get back: JSON listing artists, their genres, follower counts, and external URLs.
3. Fetching Albums for an Artist
- Copy the artist ID from the search results (e.g.,
6vWDO969PvNqNYHIOW5v0m). - Call the albums endpoint:
curl -X GET "https://api.spotify.com/v1/artists/6vWDO969PvNqNYHIOW5v0m/albums" \
-H "Authorization: Bearer YOUR_TOKEN_HERE"
You'll get a list of albums including image URLs, release dates, and available markets.
Key Takeaways
- APIs make complex tasks simple, you don't need to know the internals, just the interface.
- REST APIs use the same web tools you already know (HTTP, URLs, headers, status codes).
- JSON is the standard format for data exchange in web APIs.
- curl is a powerful tool for testing and exploring APIs from the command line.
- Real-world APIs like Spotify's let you search, retrieve data, and even create playlists programmatically. For more on structuring endpoints, see Mastering API Routing: Static, Dynamic, Query Parameters & Best Practices.
Teacher Notes / Next Steps
- If you're new to the terminal, check out curl.se for installation guides.
- Never share your API token, it's like a password.
- Most REST APIs follow the same patterns. Once you learn one, you can use any.
- Suggested project ideas: a music-festival band recommender, a photo-collection app triggered by text messages, or an automated playlist creator.
- When you're ready to secure your own APIs, consider learning about Securing Your APIs in Azure API Management with OAuth or explore Top AWS Services Explained for Beginners: EC2, S3, IAM & More for cloud hosting options.
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're 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 going to 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 we 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 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 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 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 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 and seek 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 the 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 a p those three little letters
generate quite the buzz don't they first I'd like to take some time up front 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 be 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 going to 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 what whatever you want I can't wait to see what you build and what your family and
friends submit to it we're going to be strictly using apis in this course we won't be writing our own while you most
likely are going to end up learning some best practices in ABI design we won't be covering that specifically there 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 a pi I I think we should start on that last character the ey 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 goys hey did you hear that there it is again gooey GUI 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 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 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 on click what she didn't have to do however was write the
code that makes the button interact and change with a 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 away 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 webbased 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 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 want to 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 lowlevel bit math on each character but you don't
need to because your programming language has abstracted a way that for you and provided a handy string API it
exists this 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 math
and windows it's the implementation that takes care of all of the details for you pretty cool right definitely something
to be thankful for it makes their 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 them 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're 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 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 work this way I'd import dancing so it could be more fun at
weddings chaa 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 codebase 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 codebase and why that is such a powerful concept
[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 turn 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 less lazy reasons as to why
we'd want to remote Ely 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 and it's not just physical objects
that benefit from remote apis often times we don't have space on our local machines for all the data that's
available like for example have you ever used use 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 cins it turns out that both grocery stores and yours truly love Phil Colin
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 in L Nu 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 going to drop some history into the
teacher 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 sused 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 and 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 deserve 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 technolog is 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 notes now for the
rest of this course we're 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
[Music] works 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
suet term URI Universal resource identifier now our URL here has a scheme portion and this one happens to be h TTP
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 liken 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 Foo
you say bar Foo bar one of those 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 pee 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 have been breaking our 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 web page 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 text 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 designed is a stateless protocol once that request
receives a response it's all done if you want to 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 Sur
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 and 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 cach you can embed authentication information in each
request using a header and 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 okay 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 up front 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 them
all right this instant we could even make it a fun Journey like a restful constraint scavenger hunt complete with
prizes void 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 got to
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 want to 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 ebook 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 and resource we
see a collection of their favorite authors in 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 ebook 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 want to add an author post to the SL author's endpoint and send the data that you want to update in the body
of your request now these fields will be defined for you somewhere want to 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
smos 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 could 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 going to 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 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 and now a quick word of warning it is going to look different I guarantee you this site is going to look
different because they're always making things better for us for us Spotify users us lovers of music and as as well
us developers so uh 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 is letting us kind of test out what it feels like in in the web on the web page but if I scroll down
to the bottom it'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 this Spotify uh for developers it looks like it was thoughtful uh and I can tell you that it is very nice it's a
very nice tool um we can scroll down you can see all sorts of stuff they give you some examples of what you might want to
do right what what could you build with this uh so you could find out like uh uh different things like you could use an
API to see uh uh the beats and the sections and the bars I think that there's a way to figure out if a song is
dancable or not so that 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 uh 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
going to be focusing on is the one for the web API so if I click into that we'll get a nice overview of what this
is I'm going to blow this up just a little bit uh so you'll see based on some simple rest representational State
transfer principles that's our uh that's what we're doing that's what we're going through we're going through our um our
scavenger hunt we're going through that there's a Spotify web API that returns Json JavaScript object notation about
music artists albums and tracks right so that's awesome that's great uh so we can see all sorts of different stuff it uh
it opens up at this api. spotify.com is a specific URL and then it has a set of endpoints with it each unique path right
each of those URLs that we were looking at before there is a way to get um specific
data so you could do this thing for you where you authorize so I could uh 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 uh
authorization to be able to do that you don't want to be able to just add to anybody's playlist right so um there is
some authorization that's available and uh we're not going to do anything that requires that here so uh if you keep on
looking down here you'll see that there's uh it's it's based on those rest principles um and uh you'll see that it
does a get to retrieve resources right and there's the post to create resources and resources here are uh songs and
artists and tracks maybe maybe the resource you're creating here is one of those playlists that we talked about uh
you can change using a put and a delete we delete the resource so awesome right so it's using rest uh like we saw you'll
see that Spotify uses this URI uh style so it's a Spotify track and then uh it has this unique ID this Spotify ID this
will make more sense as we we uh uh dig into it a little bit more uh and then you'll see that there's always this uh
uh spot ify URL that allows you uh to see what it was and will show you this um as well as we said uh the responses
come back and they are a Json object uh and we're going to be looking here at a tool uh in in the future called curl
which you can use from your command line that's what this dollar sign here is talking about I 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 and it will come
back paginated uh and of course um you can use caching we'll take a look at that here you can you can and uh see if
uh 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 going to say a 200 or these these 200 level uh accounts and then there's uh bad requests so if uh if you
ask wrong or maybe maybe it wasn't found that's the 404 or unauthorized if we try to do one of those playlists uh we'd get
it unauthorized and there's also if if you're a developer uh you never want to see this one it's the 500 it means you
made an error um uh on the server side uh we won't be we' be doing any of those because we're just going to be hitting
somebody else's code cool all right so um Spotify offers the ability to uh 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 uh you'll you'll find this happens
often if we scroll back up here to the top sorry if I'm making you sick there and we're going to jump in here to uh
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 want to do first first is I want to search you can see it's making a get to
the search endpoint so I'm going to 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 going to do I think probably the first
uh person that I would ever search for the first artist I would search for uh and you can see that here it's showing
the different values of what that is I would 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 uh you'll see that
what's happening is you'll see the curl here is changing it's changing the it says the que 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 uh things that
we could do here what's really important is that it needs to have this ooth token now what's nice is we can build one of
those even if we don't have a Spotify account so I'm going to do that I'm going to click this get token I am not
currently logged in um and I actually don't have a Spotify account yet in this uh in this user I do have a Spotify
account I love Spotify um and this is asking um basically what you would do is you would create a specific ooth token
if you were ever to use this API outside of where we're doing this right now you would you would create one of these
tokens so that you could log in uh later and you say what it is that you want so here's the playlist right we don't we're
not going to do any of the playlist stuff we're just going to do a search maybe we'll look up some of Beyonce's uh
Tunes but so I'm going to go and I'm going to 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 a my uh developer account here um uh so I'm
going to put in my email so my email uh I don't know if you know about this but uh if you use Gmail you can uh uh you
can do a little plus sign and it will still send to the left side of your Gmail so uh I'm going to do uh at
Spotify sign up and uh that way any emails I get from here it will have that and it's a kind of a way to let you have
multiple accounts thing so again uh my my Gmail is Craigs Dennis gmail.com but I'm going to do uh Spotify
signup gmail.com and it will go to my Gmail it will just kind of ignore this Gmail does that for you it's pretty nice
right so I'm going to put in the same password as my luggage which is one 2 three four five six just
kidding uh and uh what should we call you oh you know what I love it when you call me Big
Papa that will appear in my profile I am ready for it and aie it is my birthday on November
19th uh 19 uh let's see what do I I I think wouldn't would be nice if I was born in
1999 um what is your gender oh this is nice how how nice this is like super inclusive um I 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 uh who identify as non-binary or other or prefer not to say so like wherever you sit in that I love
uh and hats off to you Spotify for uh being inclusive because inclusivity matters share my registration data uh
sure why not I am not a robot I don't think I am oh oh no uh the images with bicycles that one's got a bike that
one's got a bike that one has a bike what is that garbage there is that this is a bike
lane uh this is a bike okay here we go please I am not a robot thank you all right so I'm G to click sign up oh I I
am male I I I am male so here we go that is how I identify all right I'm going to save uh 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 will see my logged in as big papa here we go and now you'll notice here that
there is this token here right this is this ooth token that got created for me by Spotify and it's putting it into this
console for me so I can share it now you never want to 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 uh screen being recorded and I'm going
to get rid of this uh 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 going to click try it and we're going to 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 because that's the type that I searched for um and this is the
search that we did uh we'll see some uh external URLs and we think that this is probably her I'm going to see I'm going
to I'm going to grab this really quick but you can kind of see how how things are laid out out here right so uh this
is my Spotify URL for that let's see if this is is her this looks like her yeah yeah
definitely so so great crazy and love uh cuff it I I haven't heard that one yet awesome so uh this is Beyonce great so
we got her we we found her we used this search um uh it has shows how many followers she has wow 32 million good
job uh it tells the genres so we can do all sorts of really cool uh stuff with this and here you'll see
that um I'm getting a URL I'm getting a link that will open up her specific artist page right so so here is is her
ID so if I take her ID I'm going to grab this ID and I'm going to come over here to artists and I can come in here and I
can show all of the artists albums so you'll see It'll be artists slid albums let's see all of the albums that she did
but let's look at that in Json format so uh the artist that I want I'm just going to uh pipe pipe that that ID in there
from before right now it still has my Bearer token the console has done that for
me and uh I can go ahead and do try it and we should see that now it's going to return back albums right so we've made a
get request to the albums and I can see all of the albums uh that she's had here and we can see uh where they're
available in different markets as well looks like she's available in lots of markets all over the world uh who runs
the world all right so here we go uh we're going to look let's see uh these are 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 uh 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 going to post that here open that up and let's see there she is on her horse her her magical
horse there so that's pretty cool right this is this is awesome I can get access to
all sorts of information about an artist I can get bu their ID I can go and find all sorts of different things that I
wanted to do right so so um uh if I knew an album too once I have the ID I could get the ID I could get the tracks um 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 outside of what we're doing
here but I could add um uh put together a playlist for for everybody to do using this API uh and uh again when we looking
at the artists um when we're looking at this get artist it's showing this curl command and we're going to 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 what's available right so so you can look at um there's
these different things where you can 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 dancable and you know that Beyonce's songs are going to come back uh very high in the ability
uh 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 uh recommendations this is
awesome really this is like super wide open to you and uh 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 cashable 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 beyon 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 inance
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 cuz 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
[Music] well I realize 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 say 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 uh called terminal so I'm going to open that up terminal and in fact I'm going
to make this a little bit bigger let's go ahead let's let's take let it take up the whole screen we're going to be in
here for a little bit so I'm going to type clear and clear my window all right so um uh this terminal allows me to
perform actions on my computer like I can make a d text to speech I can do say and I can say hi Mom hi Mom and it says
Hi mom um uh and the Windows operating system has a terminal as well and while it's a little bit different they're
actually pretty quite similar uh 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 high mom now note that I used quotes there because I want to pass
one value even though there is a space if there was a space is kind of 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 uh I'm going to just go Ahad ahead and make
sure that I Do by typing the word curl and if I see this I can 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 uh that's okay so um uh we're going to head over to the notes uh and you'll get sorted there but the
starting point where you I want you to go is curl. so uh you'll come to this page
you'll see this is a command line tool in library for transferring data since 1998 that logo sure feels like that
doesn't it uh 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 uh to a URL so if you don't have uh curl on your command line go ahead and pause
me and check out the notes for the best way uh to get this installed on your computer uh there's a lot of different
ways to do it if you come here under uh download you'll see that there's different uh uh 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 uh installed so go ahead take your time get that installed and when you come back um
I want you to try this I want you to do this thing with me so I'm going to go back to my terminal and uh I'm going to
make sure that it works uh the way that I always like to test is I like to go to um uh I can has dad joke.com uh how do
you get a Al alien to sleep you rock it oh so good anyway that's how you do that um that that'll let you go and it's
going to hit that website and it's going to 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 uh from Spotify so I'm going to come
back over to my Spotify thing where I was running the search uh I'm going to make sure that it's still working
actually before I get started cuz these these tokens Can expire and depending on 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 going to do is I'm going to copy this and to highlight this this is a uh 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 um in this long uh list of things here uh what this is doing is is saying hey I want to make a get request to the
api. spotify.com slv1 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 uh we're telling it hey I would like to get back uh Json and uh I am sending
you Json even though we're not actually sending Json the default has that there and this is the important one this is
sending you a header right the d-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 uh same list of data that we did
and I did check that out so what I'm going to do is I'm going to 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 going to grab uh 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 uh no this is
her ID here this is her ID it starts with a six VW you so I'm going to copy that and I'm going to use that I'm going
to go back and remember I'm going to go and I'm going to look I want to see what um what albums she has so I'm going to
come into here uh and I'm going to remember I'm going to paste this this URL here and I'm going to run uh 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
out albums on your local machine so here's what we'll do you give it a try um and if you uh once once you get it
once you get it printing locally on your machine um uh 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 [Music]
me cool so how'd you do so here's probably one way that you could have done it is just copied that right copied
this whole thing and paste did it but what I want to show you is that we have access to we know what these these these
URLs are right so we know that there's this V1 artist and in fact uh we can see that there is a a git of slv1 artists
and then you can actually pass their ID in the in the URL there right that's what this ID is here so let's let's just
go back I'm going to show you a little trick too so um I've I've got her ID copied still um 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 want to show you
a little bit more of what else how we could explore so I'm going to press the up arrow and you'll see um my cursor is
moving here um I'm going to press the option key on Mac I think you press the ALT key uh on Windows you can jump
around like this and I'm going to get rid of what's here and I'm going to say V1
artists right so that's the collection of artists and I have that specific ID right so there's the ID I'm going to
press enter here you'll see that I got back Beyonce which is awesome that's what I did and then remember the artists
have I'm going to go to the front of the line line contr a on Mac uh and I'm going to switch this so artists have uh
this is a specific artist so Beyonce and we want to see Beyonce's SL albums which is what the the console would have uh
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 uh there's a bunch of uh different information that comes through here um it's kind of hard to see right
so so um 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 into a tool called JQ and uh you'll see that it comes back very nice and pretty right so um this is
something that that is very nice to have uh and I piped that that's this this uh the symbol above uh the the ENT 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 um and again this is in the notes you don't need to you don't
need to worry about this but I know that um I can query things so I can say that of the items I'm only interested in the
name the dot name from each one of the items and this is a little query language that's attached to this JQ uh
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 the lists of her
albums and that's pretty cool right that's powerful and if you are going to 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 uh
the the console page here they do a nice trick for you if we back here in search like one of the things that I want to
make sure uh 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 going to search for a type track and now note that my query
has spaces here now what's happened here is it's done this uh URL encoding so like if you were trying to to mess
around and and work with the search you'd want to make sure that whatever you did you passed that uh with those
those plus signs there so I'm going to run that curl command we'll see who runs the world girls and I going to I see
there's this this uh this open link here so I'm going to go ahead I'm G to open that let's take a look uh make sure this
is the right track I'm pretty sure it is it is not the right track what is this Bim
fim maybe maybe it's some other some other so let's take a look well that that's interesting so uh oh I I just
went to the bottom instead of going to the top so I should have went to the very top of these
result or I should have pulled probably pulled the the name out Rocka by baby there's a Rocka by baby version of this
who okay so when the color stops hope you're not getting sick while 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 that's just
something you know there's a lot of data coming back here it's kind of hard to do to use on the the command line sometimes
I'm a little clutzy like you just saw here we go let's 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 kind of like who runs the terminal curl boy
that was a 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
docks 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 twio 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 want to send a text message there's an API call for that want to
make a phone call there's an API send an email a whatsa 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 quo 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 up front 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 w 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 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 a word of warning this is going to look completely different from my right now to your
right now uh so please make sure that you check the notes for anything that might have changed and it's specifically
about this flow that we're about ready to do is we're going to sign up for a trial account so I'm going to click this
sign up button here and this is going to look completely different I know because our team is constantly making this
better uh but the one thing that I want to 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 going to put my uh information in here and I'm going to use
the same trick that I used uh uh before uh where I do plus and I'm going to say API course uh V2 gmail.com so I uh the
plus side there again a little Gmail trick um uh we're going to go ahead I'm going to put in my password again uh 1 2
3 4 5 six my luggage how many times can I do that joke and then uh would I do this except uh must be 16 or more
characters okay there's some password requirements over there
I think that's 16 all right uh here we go starting my free trial I'm ready let's do
this I'm definitely going to save that long password because I need that for later all right so I have now uh should
have been sent an email so let me make sure that I got that email and I did I am going to click uh
the link to verify it and here we go I'm going to verify my phone number uh to verify I'm human because all humans have
phones so we're going to do 432 527 4274 please don't call too late uh I'm going to try that I'm going to click
verify all right so I got my verification code hey that came very quickly what's wonderful my verification
code uh is 017 869 uh hopefully your code's different
than that wouldn't that be funny if they were all the same uh all right so here we go so which product are we here to
use we're going to use SMS we're going to use the SMS messaging product and what do we plan to build uh let's see uh
of course these questions are going to be different uh what are we going to do we're going to build
um build something else we're going to build something else uh we how do we want to build with with twilio with code
right so we're g end up writing code if we want to with minimal code on top of code samples or no code at all so uh
definitely don't need code to build over here but I'm going to say with code because we're we're developers here um
so what is your preferred coding language we're going to do JavaScript uh even if it's not we're going to be doing
JavaScript for the rest of this uh course and I do want to host my code on twio 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 um my billing country is United States uh which is true and I'm going to get
started I'm going to go ahead and walk this I guess let's go ahead and so we'll um 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 uh we probably won't need to do that because
we filled out what we're going to do um 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 uh manage your account keys and build trust with your
customers yeah we can build all sorts of different uh uh things in here we probably won't need to do too much here
uh because most of the keys that we have are available to us uh right from this page that we're on actually
so we'll keep going uh and I can see the billing and again uh you're in a trial account and you think you get something
like $15 uh to to try with so we'll be sending text messages using that that trial dollar dollar bills y'all uh so
here we go uh and then you can uh 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 uh up to you
there's a 1550 is what we got all right so um and then I'll click next and uh then I can uh anytime I want so I can
look at this tour again uh to help navigate around which is really nice beautiful console um so uh we could
definitely go ahead and uh the first thing that we want to do is we want to get a twio phone
number so I'm going to do that I'm going to 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 uh which means it
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 uh to get around this and also I'm going to go right now and I'm going to email compliance review at
twilio.com and I should get that uh up and running if this happen to you go ahead uh press pause check the notes
Here uh for for what to do and I'm going to uh actually uh do that I'm going to press pause here I'm going to get my
account able to uh get a phone number and I will I'll see you back here in 1 second all right so I got all sorted out
so I sent my email to uh the compliance uh folks and I was able to uh 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 uh what I'm going to do now is when I click
this get a twio phone number we're not going to see that message because I'm coming in and I've got a new phone
number and it automatically gave me this one this one here this 561 uh it Went Away really quick but it's down here
this is my this is my my twio phone number is is 561 816 5433 now this number is mine which is awesome I can
use this uh 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 uh to play with I think we should do just that we should
send a text message now before we get started I want to make sure that you know this 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 verified like I'm able to send a text to myself because I verified my phone number I and it will
say sent from my twio account beforehand uh and there's more things about your trial account too if you wanted to to
get into that so so uh check the notes uh because this this very well could have changed uh but check the notes for
for more on this so let's do it let's send a short message service an SMS I so I'm going to
click here on this docs and support and I'm I click this it's going to open up I'm going to go to these developer docs
these developer docs are some of the best that are available out there u i want you to to see these so we're to
come here under uh SMS because that's what we're doing right short message service and uh under here under these
these sides on the the docks here you can uh collapse these so I'm going to come in here under API reference I'm
going to go to this message resource now um this is a this is an API right so we're we're in the API
reference so the API that we want to do is we want to be able to send uh from and uh we want to say from the phone
number that we just got and we want to send a message to my phone number right so uh we're going to do that and you'll
you'll see that over here on the right um there are uh things that you can do that that that show you what you can do
so with this message we can do all these different things U we'll start with create a message we'll create a message
first so we're going to go uh into this create a message and uh there's these different languages here so we have JS
uh and you can see the style that it looks like we'll take a look at 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 uh uh we're
we're about ready to have to do you can you could do things a little bit more cleanly but what we're going to look at
is curl right so here's our friend Curl we're going to jump over here to curl and uh the docs have this really nice
thing where I'm able to actually copy this so I'm going to click uh to copy this and I'm going to 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 is going to be
okay because I am running uh on a Mac it's going to assume uh that these slashes see these slashes at the end
here um these uh in on a Mac terminal these show that we're in the new we're making a new line available here and
also you'll see that there's these account SIDS and these off tokens this dollar sign twilio off token dollar sign
twio account Sid um in my terminal on my Mac that is what's known as an environment variable and they've been
set now um I don't have those set currently because I just uh built this account so what I'm going to do is um
kind of bad practice actually I'm going to actually put my real uh information here for us to use so so back back here
on our uh console on our tro 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 going to go I'm going to click this
copy button so I copied that I'm going to come back here and I'm going to move my mouse and I'm going to 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
uh identifying who I am I'm going to go backwards through the rest of these and so uh if you're watching here on Windows
let's just go ahead let's get rid of these uh these new lines here um so I'm going to just put them all on one line
uh we can handle that we'll do that so I'm going to uh get rid of that line and uh that way it will work uh
completely on uh both both Windows and Mac uh for what we're trying to do so I still have my uh account Sid here so I'm
going to keep on backing up here uh and I'm going to get rid of that line there we go and you'll see one more
time here there's the too account Sid that string identifier for my account was still present so I'm G to paste that
there so now the API call that I'm doing is to that specific account it's doing 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 uh 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 going to say that is sent
from let me go back I'm gonna copy my tlio phone number right so I've got my my 561 number there
and I'm going to paste that here so uh from and the this plus 561 that's a US number so it's got that the it's
called a 10 digigit long code 10 DLC so it's 561 816 5433 is the number that I just bought and uh we're going to say by
default it said hi there um the body of the message right so instead of that what we're going to do and note that
this is all in quot quotes we're going to say aoy world I don't know if you know this or not but the the first word
the way that we used to answer the phone um was uh we'd say the phone would ring and you'd be like aoy and the other side
would go aoy Hoy so we like to do that here a lot at chulia we say aoy world it's kind of like the Holo world of this
so the body of the message the text that we're going to get uh is going to say aoy world and then we're going to send
it I'm going to send it to my phone number um so this is this is one of those numbers that you verified right
when you created your account you verified you had a number so my phone number is 432 527 4274 don't text too
late at night please um and then the final thing that we have here is this off 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 uh and I'm going to go ahead and I'm going to paste that here uh so that we
have it so um uh that is uh something that you never want to let out because now you could seeing this on my screen
you could use this right um and uh you probably don't want anybody doing that so you never want to actually give that
number out you want to hide that uh and we'll talk about how to do that uh more here in the future but right now I just
wanted to show you we're going to use Curl we are going to create we're going to send a post to this URL here and
you'll notice that ends in Json so that's what we're going to get back that's the way that that it works this
is to my account my account Sid you see it starts with this AC um and and we're going to post uh using
this data URL encode so the way that the twio API works is it takes um some parameters it takes from body and to and
the way that you pass those in curl is with this Das Das data URL encode and you pass what it is uh that you want to
have uh go across here so we're going to if all of this works I should get a message back uh I should get a text
message on my actual phone uh that says aoy world let's do 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 [Music]
quote if I can go press the up Arrow maybe it will show up yeah oh right you know how many times I do that the aoy
world the exclamation point uh is is uh something you need to typically Escape so I'm just going to say a Hoy world
with a single quote there so if uh if you're having that problem sorry that's what that was so I pressed the up Arrow
to get my information back uh there and now if all is going well and I press s 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 sent it says ay it says a scent from your Twi 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
uh to send a text message from the command line right that's pretty cool let's take this a step further
actually so we know that uh that that API when I did a a post I was able to uh get information back I'm going to go
ahead now and I'm going to do uh just bring that back and I'm going to get rid of all of these parameters here um I'm
going to get rid of the from the body and the two and I'm going to change I'm going to make that I'm going to do a
get and let me show you what that looks like so I'm going to get rid of all of those parameters I'm going to keep that
same URL and it still has my account Sid there right in there and uh instead of a post what we're going to do is we're
going to do a get what we should do is we should get back all of the messages that are there so I'm going to hit this
kind of like a message log right so these are all the messages that have been sent uh which is awesome here it is
sent from your toio 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 um I've got some information uh
that's sent back here and you can see that the the message that was sent it was sent outbound uh to my phone number
to me from that number uh which is awesome right and uh like I said curl is a little bit uh challenging because it's
going to be a little bit different if you're in uh Microsoft Windows or if you're in Mac I tried to make that as
comfortable as possible but you saw that I did run into a couple of things like I couldn't use the exclamation point and
things like that um it's a little clumsy so um stay tuned because 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 twio 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
[Music] break 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 them with you I use these to dive in 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 sharable collections for the most popular apis that are out 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 Metroid Vania because they're
similar to Metroid and Castlevania now these apps are Postman post Postman esque let me show
you an example I just bought this lamp here it's rad it's from GOI 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 it also has an API these are the
docs here and as I explore these docks uh I'm going to 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 GOI
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 uh the goie devices that are associated with my account this API requires a header and
it's called goie API key and you'll see these double mustaches here that I'm using this side little mustache thing uh
this is getting things from my environment as 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 and note that
uh if I click Send here we can see that this is the color of my light currently and I can also uh turn it on or turn it
off and I can turn it on and I can also change the color right so I'm going to turn this to to Red you
don't have to turn the red light on roxan 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 uh 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 start it if you click up here you could go and you can actually check out the GitHub repo
uh and you could see cute little fox here and you'll see over here how it's tagged oh it's tagged rest client I
guess maybe that's a little bit better than my Metroid Vania analogy uh maybe rest client is a good thing API client
that's also a good thing so there's lots of these tools uh 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 goie 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 uh what I'll do is I'll make a new folder called twilio so I'm going to 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 uh oh you know what this new number that we just bought
this twilio number that we bought not 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 uh 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 uh a text to your number now my number I'm going to send a number it's 561 81654 33 I'm going to send it
yo and uh uh there we go it went and I ended up getting a default message back um and we could change this we can make
we could program this to do whatever uh but I'll show that off later but for now uh I just want you to know that we
created a new message uh by sending to this this API and we can actually get it um and you can also find your phone
number later here under this phone numbers if you go to phone numbers manage active numbers uh you can see
your phone number and remember outside of trial mode you could buy multiple numbers so that's an important uh thing
to know here so all right so we're going to look at the incoming messages so uh 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 going to 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 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 this is the example that we
want here I'm going to grab this URL you're going to see all of this that's how they're filtering there's some stuff
here at the end I'm going to grab all of this and I'm going to copy it I'm gonna come back over and I am going to uh
paste it here in this enter request URL I'm going to paste the whole thing there and it was a get request and uh the URL
had some stuff in this query string that came afterwards and a query string uh 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 we don't want from right we don't we
want to look at all the numbers that were was sent to right so this is the two here is what we want
now this 2B here just happens to be a uh percent 2B URL and Coda happens to be a plus and I know that and I just happen
to know that without having to Google it but that's that's a little rough to know like how do I make a plus sign in in
here um 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 want to add this query we don't want to
have this whole stuff at the end here we want to put in uh two we're going to add uh one of those things there we'll put
in a two so that's going to append that query string for me and I'm going to put in uh uh the to my phone number which
again my willo phone number uh which is over here in my
logs uh right here actually I can I'm going to grab this number this is my my twilio number I'm going to put it in the
format uh that is wanted there my rest Fox here we go so I'm gon to that and we're going to get rid of 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 the ID for my account and then it's under messages
there's a collection called messages underneath this count Sid but what we want here is we want that was uh using
an environment variable from curl um 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 uh to to replace them is if we go like this if I
get rid of this and I put a Col in what's going to 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 the the variable that's up here right is col and twio account Sid that was just what's there
let's keep it because that's what it is and then we're going to put our account Sid there so that also is on my console
so I'm going to flip back uh to my console and uh on the the main page here you come in uh you can come down and you
can grab your account Sid so now I have my account S and I'm going to paste that there awesome and I think we're ready
I'm going to press send and uhoh 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 uh these messages so we want to make sure that we
have some authentication happening so I'm going to head over to the off 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 you can slide these kind of around
as need be uh so I can I'm going to pull this and you'll see that when I do my my little menu here uh collapses uh so uh
I'm going to choose off from here but that that is also available in uh the header here right so like it's just a
different view of it all right so in the off I'm going to put in a basic off and I'm going to put
in a username which is my username and then I'm also going to put in uh my password which is my off token
over here and again this is very private and you would never ever want to do this uh you now know my off token I don't
want you to have that um uh because uh 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 um awesome so uh 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 uh showed up there and then
uh 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 a the the response came
back and this is Json right so we have a key called messages and this messages has this uh it starts out there could be
multiple messages here right so this is a 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 because if you kind of
turn your head sideways it it looks like a mustache so uh all between the opening mustache and the closing mustache uh is
the information about um the mesages right so here's the and there's the closing uh bit of my list there's only
one this is the closing mustache there and uh so part of the message that we could see we could see who uh it was
to that's that's my twio 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 my phone number uh 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 uh 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 uh uh let's see uh this
returns all incoming well let's let's be a little more all messages uh sent to this phone
number right and uh one of the things that I like to do is I like to put on uh 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 come go and look uh and put a link there so I'm going to go
flip back over the stocks real quick uh and this is read message with matching a filter I'm going to copy this
link I'm going to grab this or click this here so that then it changed the URL up here going I copy this this is
what I'm going to store in my notes again this is totally optional and this is just notes for you for later because
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 AP 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
going to duplicate this because it's got a bunch of the information that I already need in it so I'm going to
duplicate it and uh what I'm going to do here is I'm going to duplicate and I'm going to say uh send message right
so uh when we sent a message before remember it wasn't a get a post so I'm going to change um I'm going to change
that from uh a get to a post so now we've got this send message that's a post uh and uh the query string I don't
uh want to send a query string anymore right so remember before when we did this we sent it to using the the data
URL and code in fact let's go let's pop back over there and look at what it was that we did so in the
documentation uh over here we have this uh create a message resource so so on the message Resource page uh here we can
look and we can go to this create a message resource and uh there's some information about it so you send this
HTTP post uh you can see that again we were remember before we doing this data URL encode 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 that says if you want send messages well 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 call caller IDs if you wanted to you could
send to somebody else as well um just just there that's how you do that uh if you wanted to test or show somebody what
you're building um that's that's how you do that uh after of course after you're not in trial mode you could send it to
whoever you would like to so um when we are creating a message we must include the two 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 let's
do that let's make it so that it sends a picture now when I am in rest Fox over here um I don't want to use the query
anymore uh I'm going to keep the path because the path is the same right so we're going to do uh we're going to do a
post to that same URL twilio account accounted messages. Json and we're going to make a post to it instead
of making a list and retrieving we're going to create so uh we're going to go under body and for the body we're going
to make it form URL encoded uh and what we want to do there is we want to send it to so I'm going to send this uh to my
number again don't call too late 527 uh 4274 um no really uh if you want to call
and get feedback that's fine um I I'd love to chat um so we'll do from and that is uh my number again this is my
number and uh what 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 uh quo number there um uh from is this value there and we
are going to add uh 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 um uh check out for yourself um to know
what it is but it is a photo that uh I pick if you will that I'm going to uh send to myself um it's also in the notes
if you want to do this as well if you want to copy that and paste that so here we go I am going to do a send now
remember I'm also authenticated with my my username and password because that copied across when I did it so I'm going
to do a two from a body and a media URL so now I'm going to go ahead and click Send and boom we got our message back
right so the response we got a 2011 created right so it was created uh in the body we can see the body of our
message the key is sent from rest Fox uh it's got some information we can go ahead and uh get access to that uh
message if we wanted to and it's got these actual uh media resources down here which we can also take a look at
and we could if we wanted to open up a whole another 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 uh that I don't love about what we
just did are um in my in these requests and these separate requests these these uh these These are duplicated right
they've got this username and password if I go to my post uh send message I've got this username and uh password and
they're duplicated there which isn't great right that's not that's not excellent um uh one of the things one of
the tools that most of these uh rest clients provide is a thing called an environment and let's set that up really
quick real quick for this um so if I come here under this environment here is my default uh collection and I can add a
new environment I'm going to add one for twio now the way that these work uh are they are Json based so uh this is
remember this is the start of an object now if you've never WR written Json before take your time use some patience
one of the things that you could do is you can come in and you can put in uh account
willo account Sid and uh 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 um and now uh I'm G to put in my account Sid and again let me go copy that one more time and I
don't have to copy this anymore because it will be part of my environment it will be here with me which is really
nice so come over here I'm going to 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 going to put a new uh the key here and we'll do AO uh account or
offen and again this is uh that can be that key can be whatever you want it to be and we'll be able to reference it so
I'm going to come and grab my off token I'm going to change this right so uh that's a great use case of this is I
don't want you to be able to uh I am going to change this right so as soon as this as soon as I'm done
recording this I'm going to change my off token and that would mean that I'd have to go change each one of them 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 quo now instead of user name I can do this mustache mustache and I can say
twio uh account Sid and uh that's the way the templating language works here and in most of these rest clients um and
you can do uho uh token so when you see that that's what's happening that is the environment
it's using the environment variables I'm going to go do that for here and also I'm going to copy my off token for here
and so now I only need to change that in one place in my environment um and uh you can also use it here so like not
like before I can I can also put my account Sid here um so that will also make this so that it's sharable right so
um 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 uh see if you can figure out how to add to your Json
there uh your twilio phone number and then you could replace it right you could replace it here with your uh with
your from from your twilio phone number uh pretty neat right so that's a good that's a good little trick that you
could do and here you could do your twillo 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's still Works yep it's still working and let's make sure sure oh I'm not going to send
another picture to myself that's fine so uh 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 uh 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 uh when we get back we're going to take a look in a
different Tool uh cuz this is rest Fox and I know that you're probably getting ready for a rest so let's take a quick
break um and then let's see if we can't retrieve that pit that I sent myself via
this API but let's do that in another Postman NY uh their rest client right after a quick break that
[Music] is all right quick refresher we had just sent a message message from rest Fox a
rest API client uh here's the body of the message we did sent from rest Fox and we actually sent across uh some
media with it you can see here it has this num media one because uh each text message can have multiple uh uh Medias
attached and if you scroll down here you'll can see that there is this uh key of subresource Uris and it has a list of
um an object here and one of the objects is for media and what this will do is this will allow whatever's at URL will
give us the uh accounts uh for this account for this message specifically it'll give us all of the media that is
listed now um typically when I have something that's uh 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 works in case you wanted to 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
I start here here I start working on my coding I would love for you to go ahead and download this um because I want to
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 uh installed and once you do come back and uh I'll show you [Music]
something okay so uh once you get Visual Studio code up and running if you press uh command shift p there is a thing
called extension and this will do a little if you type 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 going to install a thing
called Thunder client and it's this one here it's a lightweight rest API client I for vs code it's really powerful and
the good news is is it is Postman esque you are going to feel very familiar when you take a look at this so uh if you do
it you you go ahead and click install uh and what will happen is there'll be a little Thunder client that will install
over here like so uh and just like you've seen before there are these this concept of uh Collections and we can
make a new one so I'll make a new collection uh for twio uh and typically what I'm doing is I'm coding and I run
into this API and I'm like oh I wonder what this is uh I've going to go uh explore it a little bit I'll explore it
right from my editor right so I'm write my code here and then I can come over here and just take a look at uh what was
there and so uh let's go back to rest Fox and I'm going to grab uh that rest Fox that we had here right so we're
going to do that then grab that and I'm going to come back over here to uh twio I'm going to
make a new request I get to name it and this was the uh media check uh let's no we're going to do all media all media
for a specific message right uh so here we go I'm going to paste that URL in here and of course
it's missing that first part which was uh api. twilio.com uh so again this is the going for that account to those
messages um I'm going to look here at where it says off so it says inherit authentication values from parent this
is a very nice thing this is something that postman has too uh that rest Fox doesn't necessarily have uh we put this
in our own environment um it's kind of similar uh 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 off up here so I could do this basic off here
and uh go grab my stuff and so just a reminder in rest Fox uh when we did that before we were in the environment of
twilio and I was able grab uh the twilio account Sid right so let's go uh let's go back to our code here and the twio
accounted is the username and the password let's go back to uh that environment and rest Fox uh the password
is that off there we go we'll paste that there perfect so I'm going to click uh save on
this and so now this all media should work so I'm going to go ahead I'm going to do a send to this and there we go we
got it back and we can see uh um 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 uh that uh 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 not all AP
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
going to do that I'm going to make a new a new little request here so uh new request and uh we're going to call this
uh get the pick right we're going to get that pick that I sent because we don't still don't know what that pick was what
was it let's go take a look so um so again at the end of this uh oops sorry at the at the end of this
there is no extension right so I I got rid of the Json extension I'm going to put at the front here HPS api.
twilio.com and uh the interesting thing about this is this pick is not authenticated and if
you do authenticate you end up actually having some problems so I'm going to tell this request specifically to not
inherit value so I'm going to disable this so that it's not authenticated so when I click this if all goes well we
should see the pick that I submitted awesome and we do uh cool so um it's a little big it's a little bit of of a
pick um that was sent here um and uh 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 uh the last modified date if you have a request that has this on it it means that you can use caching so you
can uh when you make the request you can actually say if it's been modified since this time I do that so I'm going to do
that I'm going to grab this let's let's just take a look and see what that does so I'm going to go to headers here and
I'm going to put a new header in here of if and you can see that there's autocomplete so it's if modified since
so again this is the request that I am making I'm making this request and I'm going to say if it's been modified since
then uh uh give me it otherwise uh let me know and so the way that it lets you know um 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 um and what you can do to to send this
across so 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 uh 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 h to be caching mechanisms like last modified and eags a
restful API should support caching it's up to you to maintain the cach on your client and decorate your quests but this
can come in really handy to avoid making unneeded requests and those are the 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 uh things that
you want to 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 going to go uh here and I'm going to just do a quick quick little Google
search for Postman um and this is really nice you can do this for whatever API you're working with and since we're
working with twio I'm going to search for the postman twilio collection um 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 uh uh
things on this API Network where they've built uh apis for you to go and share so I'm going to click this and now note I'm
inside of a web browser postman's done a really gorgeous job of uh of letting you run inside of your browser you also can
run it locally like we did with rest Fox um but I'm going to run this from my browser so I'm going to go into this
messaging SMS uh and you can see there's all sorts of different things uh in here uh it's a
little bit hard to get to here but you could change things put in your account it and and all sorts of things like we
saw look here's the double mustaches right and here's a thing to send an SMS uh um and it's it's super cool um it
it's it's neat right and so you've seen this here's your authorization headers the body there's Collections and uh
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 that's kind of nice so again there's path variables right and the path variables coming up here
there's the the colon account Sid that you saw uh from before here somebody's using this as the start uh the https API
t.com and it's doing a post right so it feels very similar so you're you're familiar with this there's also a bunch
of other things over here that it can do that can get a little bit distracting and that's what I was trying to kind of
avoid uh um because I wanted you to to get get familiar with it but know that this exists um 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 uh code it's like
open close tag this is really neat so um we have curl right so we can 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 nodejs 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 um and if you look at in here you come down here here it is in uh PHP with with guzzle I don't I don't
know what guzzle is I like that though that's why I chose it um so you can see that it's generating this code for you
and if I copied 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 um twilio does have one of those but if you
were looking at one of these that that didn't this is a great way to get code um so again check out the API network uh
this Postman API Network it's cool I think you're ready now uh to use this if you want to but also feel free to use
the other tools explore the apis in the in a in a comfortable way wherever you might be uh uh most comfortable with
because there's all sorts of really fancy uh 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 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 where to see
that we saw how to organize our requests together into collections as well as share common and secure values by using
variables we learned how to add different values to requests both in form 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 going to want to 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 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 boilerplate code by boilerplate 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 are 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 Library 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 so again I'm in the
docs SMS create a message resource I'm here under the curl tab currently remember we did this we went and we saw
how to do this we passed the from the body and the two we passed in these environment variables as what this
dollar is and this dollar toio ofok and their environment variables and it's also used here in the URL uh so we had
done that we done that with curl now one of the really nice things um about these helper libraries is they look very
similar but it's taken away this whole notion so let's let's go here I'm going to go to this nodejs now quick word of
warning if JavaScript is new to you um there is some stuff here that might be a little confusing and I want this to just
kind of 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 uh requirement uh 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 going to take advantage of the fact that
we're in a video right you can take me right back to right right here it take me back to right here and we can 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 a message so this was uh you
get this authenticated client right we know what that is we authenticate with our client uh with our with our account
sit in our off token like we've been doing and then we're going to do this messages
a client so client. messages there's our rest client. messages. create and we're going to pass in the from the body and
the two and it's got all the information that we know and then there's doing some of this JavaScript stuff so then we're
going to get a promise back and then we're going to get access to the message and uh this console log is going to
print out uh to the screen uh I don't think we should send a message why don't we look at the messages that we've done
let's let's do that so I'm going to go to that example so I'm going to 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 going to copy this and I'm going to 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 uh on my computer uh called scratch and if you want to make
one uh you do makeer scratch just kind of put this wherever you want to and then you get into that directory um if
you're doing this uh in a 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 um and so I'm going to 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 uh directory so I'm in this directory here and I'm going to make a new file here I'm going to call it
explorer. JS because this is typically what I do so I'm going to come in here and I am going to paste uh that code
awesome so now I have this code here and this code is on my local machine um which is awesome so now now I'm going to
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
um 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 going to go up
here under terminal and I'm going to do new terminal and Visual Studio code this is really nice my terminal can actually
run the same terminal that I used to open it uh is running down here uh in the bottom and what I'm going to do is
I'm going to use a package manager to install um the twilio uh helper Library so I'm going to
say mpm install twio um so mpm is node package manager um and if you do not have this if this does not work check
the noes because it means that node is probably not installed on your computer computer um and if node is not installed
at your computer there's a great uh walk through in the notes on how to get node installed so I now have uh twilio uh
helper Library installed which means this require twilio statement here is requiring that
Library remember in rest Fox how there was an environment and we stored the account sit and the off 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 filio secure there's some great examples in here on how you could do that so one of the things that this
suggests doing um you can see it's for mac and Linux and different different shells have do different things um uh if
you run this in your command line you can set your uh environment variables and then when you run node it will work
uh I'm going to do I'm going to do this one so I'm going to copy copy this here and uh I am going
to uh just paste this we'll paste this I'll show you show you what it does so uh I I it's it's saying we want to
export my account Sid and my o token we're very familiar with these days so uh we're gonna we're GNA do that let's
let's do this real quick so to pop in my account token there I'm
going to go back over uh to my console scroll down and grab my account here and then I'm going to paste that and I am
going to go and grab my off token and I am going uh to paste that so again I got to that
oops accidentally pasted my off token in the wrong line there so I know that it started with a four and I'm going to
paste it down here where it says your off 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 there's my um it's going to write these two
lines I'll show you I'll show you what that looks like so I'm going to uh it's going to create a new file twio IM and
it's going to appin that that's what this double-- twio IM and then it's going to source that which means uh put
run that uh environment variable so uh if all is working well now if I say uh Echo and I can do twio
account Sid um we can see that I have that available and that created this file here called twio IM and you can see
there is my account sit in my token which is nice because now this code uh works it should be working using this
and in fact if all is going right so I've I've got node installed I in I installed the helper Library um I put my
account Sid uh from the console into this twio IM and then I did this final command
here the source twio IM which will run that file and put those uh variables into my environment variables uh and as
I showed you that they were working so so let's go ahead let's do node explore so what's going to 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 so uh let's walk the code
really quick so this is pasted straight from the uh straight from those docs so we're getting a client back um from this
required twio this is a twilio library and when you get the twio library if you pass it in account Sid and an off 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 at twilio and because it knows who you are it's able to access stuff on your half so very similar to
what we're doing with the curl but this client we can use this multiple times um it will always be authentic so we're
saying of all of the messages we want to list them all right so we want to get a list of all of the messages actually not
all of them only 20 of those um so let's go ahead I'm going to just we know that we haven't sent 20 I'm going to get rid
of this so you can kind of just see this other style here so we're going to say of those uh we're going to do this list
and then I'm going to 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 uh messages and then we're going to do a list on those now the way that the way
that this works is um 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 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 this these list methods are asynchronous that which
means that it's going to go and run off and do some things and then it's going to come back when that comes back it's
going to uh run this code so this is how a promise works so it's it's going to say then after go and make that request
then give me the messages and just so you what's what's kind of strange about that is if you're you're probably used
to code uh working like this so I'm going to write out to the screen that's this console log I'm going to say
starting starting program and we should see that line print now you might think that this is going to print um it's
going to run this and then go but if you you I'll show you here if I do this console log and I say uh Gathering uh
message log um what what you'll see is it's going to say this this Line's going to start but
immediately it's going to 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 going to save that run that one more time here we go and you'll see right away it says starting
program Gathering message log so it 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 waights it 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 before but in
JavaScript you can uh make a function uh I'm going to 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 a it's called a
fat arrow and that's a way of quickly defining a function and so you can see here um there's another one here that's
doing it as well um so it can be a little bit uh um uh Messy as you're see all these pins 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 so what was very nice is it came across this
messages list this is an array it was a 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 um 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 let me just go show you one more time uh let's make sure that we're looking at
the right thing here so so we we we 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 this this is
a string of things and it came back Json on but I'm able to actually work with each of these messages as if they're an
object so let's look look at that again so uh list returned this object this array of messages and each one of those
um 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 um so again if that is all new JavaScript terms to you don't don't worry too much about it basically we WI
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 because
often times apis that you hit are going to be asynchronous like this you might see that uh you need to be able to you
might run into an error and what's what might happen is it might get swallowed in fact let me cause one to happen so I
here it's supposed to say off token I'm just going to put in uh um my luggage the password to my luggage 1 2 3 4 5 six
so that is not my account Sid um that is going in there so I have 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 going to go to try to make this and it's going
to 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 home you got to make sure you save your file or the code doesn't run so let's do it again um and you'll
notice that I didn't get any error at all and that can be confusing that 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
I had any problem so what's happening because this is running asynchronously this then never runs right we never get
a chance to run this because this list method method didn't actually uh finish working so one of the things you always
want to make sure that you do is to every promise you can catch and you can catch an error and I'm going to make a
fat Arrow cuz I'm I'm going to have a function happen here that says console. error ER RR okay so now I'm going to
print that out I'm going to 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 uh this is uh what comes back is there was an authentication error right and we got a
very specific error on this 2003 and uh it will help us kind of look at what's happening oh here great this is right my
off token is wrong the wrong combination of accounts sit in off token exactly that is what has happened um so cool use
of uh things there I'm going to put this back so that we have uh things working uh so this was off the token and
I can still leave my error in there I'm not going to hit an error so it's not going to happen so a promise has a then
and also has a catch right so uh let's do that so I'm GNA run that one more time and save it wow y'all I got to get
better at saving here we go there we go so now we're back to working again awesome all right I want to show you a
little bit of a different way that JavaScript can work uh asynchronously that you might also see um and this is
really syntactical sugar it's called async await and if you just uh wait a bit it will all sync in I promise that's
a there was three jokes in that one that was a that was a hat trick of a joke all right so here we go so um the way that
it works the way that this works is you can say that a a function is going to be asynchronous and we want this to run um
uh 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 going to be relevant to the
messages that we have so I'm going to make a a new function and I'm going to call it uh Delete all messages okay and
when you define a function you can kind of put uh the this is the parameters that it takes we're going to say that
there are no parameters and then I'm going to run this function so um while this is an a
synchronous function I can actually make it look more uh like it is in line so it can kind of run the way that we want it
to so I'm going to say const messages equals a wait so now I have because the function itself is asynchronous because
I've used this here I can use this keyword a08 and I'm going to say client dot uh messages. 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 um are
the same messages that were coming into this this function but now it's out on this side so I have this variable that's
called messages so um and that's an array right and it's and I could do I could do this exact same thing here and
I could list that uh the same way but let's let's go a little bit further so I'm going to say for each of the
messages for each message that is of the messages array so these are those uh inflated messages
that we saw uh one of the cool things um that you're able to do with the client is the the the object that's returned
back has actually has some properties on them and one of those properties that it has is called delete uh before we do
that I'm going to make sure that let's do a warning uh here real quick so I'm going to say console. War we're going to
say would have deleted I'm just going to 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 say would have deleted message. Sid so again that's the string identifier of
that so would have deleted message. Sid so and uh we will close that function out all right and now I'm going to call
that function and this you know of course that's how we we call it and this is
would actually be a promise this would be very similar so we could do this we could do a
uh in fact let's do it we'll say then and uh if you wanted to call a make a function that has no parameters because
I'm not returning anything right I'm not returning anything from that function I'm just going to say console.log and
I'm going to write done and I will put all of these this code into the notes so you uh can also copy and paste it if you
want to and I'm going to do the same thing that I did before catch the error and all will do console. error and now
if you do the console is you know of course it'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 uh and if I just pass the error that happened there
so um I'm going to warn that we're going to would have deleted the messages but let's let's take a look um at what
happened so I'm going to get rid I'm going to keep the starting program here right so we're can do uh starting
program and then it's going to do delete all messages it's going to call that and then when it's all done it will say done
I'm going to give get rid of uh what we had here okay so we have delete all messages uh it's going to go and it's
going to get a list of all the messages it's going to Loop through each one of those messages and uh when it is done
it's we're right now we're going to warn that it's uh would have deleted it and this is uh what we're eventually going
to do because there's a function that's available to it all right so I'm G to save that and then going to run it let's
see what happens okay so it would have deleted some of our SIDS and again this is the
image this is the the mm means that it was the MMS which is the one with the picture and the rest of the SM that we
have so I think I am ready to do this uh I hope that you are ready to do this as well um again this code uh should you
want it is available in uh the repo because you want to run this because you want to delete these messages um so
let's let's I'm in say say of would have deleted I'm going to say deleting and then uh here we go I'm going to save
that I'm going to run it and so 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 um because the object itself knows how to
do that the library is made an object that is smart enough to be able to call delete on it and it feels like um 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 uh message. Delete is not a function uh what I meant was actually remove uh so the the function name is remove on
the message so here we go so um and you saw that there was an error right that was the error that just happened that
good thing I put that catch in there otherwise we would have thought it worked so here we go so we note explore
move and said deleting deleting deleting we deleted all of those um so remove is the name of the function that's there
but it is doing a delete uh 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 we're 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. list returns a promise okay but um a promise of the future but
because it's being awaited it's going to return it right here in line then I'm going to 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 me I have a method on that message called remove and it will actually go and do the next level the
next level of delete there for me so it's really nice this object feels like it would uh feel like if you were
writing JavaScript code it would feel this way uh but behind the scenes we know that it's doing this API calls and
the client library has abstracted all of that away from us uh 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 your your language
there's how you do it so it's client. messages. list and for record and messages and you print the record s and
you can see that the code looks a little bit different in all 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 uh in each way because the library is kind of the same and you'll you'll find that as you use
other apis um and they have helper libraries they will they will mimic the way that the rest API looks so I
realized 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 going to do is we're going to go into more deep things and I know you can do this so so
there 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 uh 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 a API thing things that we were doing with curl and we were 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 uh 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 in here is resource identification and requests that's the
uis that are included and we've seen that but because the uis 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 common place
where you'll use helper libraries is from within applications that you're building 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 o we're here
I love this part the building part we're 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 going to stick out from all the rest we're going to 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 in
physical spaces that says text a photo to this number and then our site will gather those on a web page and display
them now you're probably wondering two things right now the first one is probably wait what are those photos
they're going to be texting and that's a great question we're going to 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 pick of the best impersonation of me I 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 faced 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 going to take our time we're going to focus on making things work using this API all
right let's do this okay so I have a template here in the notes uh in the uh unit 3 video one we have this
index.html which is our web application um if you come in here you can scroll you can kind of see things here we've
we've the app is called pickle where you get to pick your picks Peter pick the pickle pickle that sort of fun joke
there and then we're going to click this RAW button right here we're going to get a hold of this
raw and I am going to uh highlight everything and use the magical uh developer command C copy and then I'm
going to come over to uh back to my scratch on my visual studio code I'm going to make a new file I'm going to
call that index.html hypertext mark language right and I'm going to paste that right here
so now I have that code locally on my machine if you are a git user you could definitely check this out and have your
own uh version of this if you wanted to but that that's a good way to get this here locally because we're just going to
explore around here just for a little bit let's take a look at this file uh as it exists this is something that might
happen to you um as a developer who knows now about apis they might say hey I've got this template um and I would
love for you to be able ble to set it up to make the the API work so the first thing to do um if you want to look at an
index uh uh 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 um so we can just go ahead I'm going to go to my terminal I'm going to um do a new terminal
here I'm going to open that up and uh I'm just going to say open index.html now what that's going to do um uh in my
Mac uh is going to open this up for Windows take a look and see how to do this exactly but what this will do it
was will update my uh my pickle here so so you can see this is this user scratch um and then you know my whatever it is
it's in my my directory there and uh this is what's happening there's some some some nice kitty photos there I'll
show you how that's working and if you uh click into one of them you get a nice little Gallery here and you can switch
between the different kitties you can see the text that the user uh submitted that's kind of where we're going with
this that's what we're planning on doing very nice setup uh simple one little pager application uh because I'm using
some uh apis to to be able to do that here locally um I'm using uh remember apis not not web apis but I'm using a
view is 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 uh popup and it also has an API let's take a little bit of a look here so I'm going
to move I'm going to move a little bit slow through this um just so in case this is your first time seeing something
like this um I've got some setup here in this head tag you can see this is 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 um it's not my my forte uh and often times um you're given a template like this so you're given hey here's a a
working thing I would love for you to get some uh apis in there um so the the body of the app has this you'll see
notice this little mustache mustache and it says call to action so um in view this is part of their API is if you use
this for a template it will be replaced with something of 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 could 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 uh picks that we're trying to collect that
would be uh 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 in this uh 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 um 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 and whatever is in here will get
returned uh to it and then there's some more uh 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 uh creates is there is a life cycle 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 going to call this load images function and this load images function you'll notice it's an
async uh uh image and I've got some to-dos in here this is someplace where you might be communicating back and
forth with uh people uh as you're working uh together on a project so use the messaging API to use uh submitted
photos and also create a web- based API that matches us expected response so that's what we're going to do over the
next couple videos here uh so what we see in the start here is there's this gallery and it is an array and it's got
um some stuff from this there's a website called Place kit that I used here so you can get different versions
of K kitties here and there's a description and there's an ALT tag which is important because uh for for
accessibility reasons this is what it will say on the picture so uh that is what is happening to be able to
make that work um so we we now have our app here uh locally and we can change things so
um one of the things one of the photos um that I want to do uh I love to get photos of burritos from around town so
I'm going to change this I'm going to say submit me a photo of your burritos and I'm going to save that file so see
it's not saved I'm going to save it when I go back to my file there when I refresh it you can see that it says
burrito what are you going to want to gather why don't you go ahead and change that uh
change that to whatever it is that you're wanted to gather as we build this project through and of course you know
you see that you can change that however so make sure that it's downloaded make sure that you can change that that you
can change this file and it opens uh locally on your machine cool and so now we have a little smattering of apis here
already so we have a 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 uh here but remember it is actually an API and we're going to use a web-based API uh to be able to to
get this information and we're going to 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 [Music] we're going to get our web page 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 to host like to 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 going to have twilio host our code for us and that is to say we're
going to have twilio be our web server that will be use 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 going to go functions and assets services and I'm going to say create service it could be whatever you
want I'm going to call it pickle like pick your picks with pickle Peter Services allow us to group
our functions and assets together for our application so I'm going to click next and what's going to happen is we're
going to open up to a very nice IDE that will 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 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 going to grab
code from my local machine and if you want to you can just grab it for GitHub check the notes for more on that but I'm
going to go add I'm going to choose upload file I'm going to find my file my index.html and I'm going to choose open
now what we're uploading we'd like the world to be able to see it so I'm going to choose public and then I'm going to
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 going to do that by clicking this deploy all button down here and now we see that it's green and
I'm going to go ahead and choose copy URL and I'm going to 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 uh 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 the site would it fall
over what the serverless solution is doing is allowing me to not need to worry about any of that anymore twio is
handling all those concerns for me which is great cuz 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 going to go uh back to my number uh over here if I look under phone
numbers and I do manage I'm going to hold down uh command or control and click active numbers I'll open up a new
tab nice little hack to keep your screen open here uh so I've got my numbers here and if I come in here to configure
it what happens is I'm going to 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 uh 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 Django a Java Ser it it doesn't matter what matters is that what was returned
from my server was HTM or hyper text markup language my server responds with HTML and my browser
renders the page now the same is true with twio someone is going to text our twilio number and twio 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 twillo markup language they look very similar HTML and
twiml twilio will be able to 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 let's pop back to our service so I'm going to come here I'm going to add a new function and I'm
going to name this function incoming message that's what we're going to do we're going to handle an incoming
message and there is some very nice default boiler plate that is commented that comes through so boilerplate 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 uh voice applications
but we're going to 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 will step you through it first though let me walk you through this function just a bit so
twio functions all export a a thing called a Handler and that Handler takes a function that takes some parameters
context event and call back 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 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 uh so so this is the event will hold everything about the text
message that was incoming because that's what twilio does twilio is going to pass that information through here and for
instance that message will have the two 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 going to call
us the API is going to call us via a web hook web hooks are pretty cool uh check the notes and then finally there's this
call back uh object here which is how we send information out of the function it's actually a function so we have this
call back uh this is the errors that might have happen and then this is what gets returned and here's that twiml
twillo markup language so I'm going to get rid of a couple of these lines here these are sort of demo lines I'm going
to get rid of that and I want you to be able to see what's coming into the message so I'm going to start up here
I'm going to do a console.log and what what this does is when the function runs uh if we want to
we can see the message it will show up down here so uh let's say that we got an incoming
message and uh it was incoming message and we'll just do a call in and then I'm going to use this
dollar this St 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 uh when the function runs we will see that the message came in
because twio is going to pass that message and we'll see it there and we're just going to say thanks when somebody
sends Us in so we don't really need to do anything with this message but you might want to filter it or handle things
differently based on what they said in the message and and you totally could do that but you'd probably also want to
check the photo that came in in was actually a burrito or something not in AES 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 uh a
messaging response and there's a little helper Library here right so a little helper library for twiml uh and it has
this twiml object and uh before it was doing say which is text to speech so if you you
wired this up it would say hello world in like a computery but actually pretty good sounding voice the days but I'm
going to change this to be a message cuz that's what we want to return we want to return a message and we want to say uh
thanks for your submission right we want to want to thank them there we can also send any
sort of emoji here let's see if maybe a camera that sounds yeah that's nice thanks for your submission and so what's
happening here is this object it's a fluid API it uh means that it doesn't return anything you kind of tweak it and
and it builds as things go uh on it so you'll notice that this isn't returning anything I'm modifying this object and
then uh when I send it out at the end that's how 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 con console.log and use the back tick and
we'll say twiml so twilio markup language was uh Twi and you'll see that it looks a lot like HTML uh there are
some rules to it but we don't need to learn them all right now so I'm going to save this and uh just like before you'll
notice that this is gray it hasn't been deployed so I'm going to click deploy all and while that's building I'm going
to head back to my phone number page and I'm going to refresh it so on my phone number page I need to change my message
down here it says when a when a message comes in we want it to be a function that is in the pickle service that's uh
done in the UI and we want to choose incoming message which it hasn't finished deploying yet just finished
deploying one more time time Let me refresh that page so that shows up for us uh we're going to go to uh when a
message comes in it's going to be a function and it's on the pickle service for this UI and we want to do incoming
message and if we do save all right so we should be all wired up I'm going to click uh clear logs here and I'm going
to turn uh live logs on you can see that this says live logs on when it's ready I'm going to clear the logs one more
time and what I'm going to do now is I'm going to send a message in and we should see this we should see what what I send
in and uh we should see the twiml that was sent back and I should get a response back so let me 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 going to send this in so check out this beautiful
burrito little Emoji I'm going to 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 um 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 uh you can do
that later uh if you need to uh but but this uh 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 going to 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 uh 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're handling some missions 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 pequ 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 Fran 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 get it all right I'm I'm gon get out of here I
can't stop all right let's do this okay so we're 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 we're setting this gallery and we're
setting an array 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 that 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 going to create a new function so I'm going to choose add add function and I
can name this whatever I want and uh I suppose we should be clear right we're going to make an API we're actually
going to make one so slash API and then I suppose we should probably say what it's going to be so we'll do a PIX API
here right and I'm going to press enter and that will get me my boilerplate code uh of
which I am going to get rid of everything so uh thank you for the help we're not actually returning twiml this
time we're actually going to return an object and uh what I'll do is I'll copy the hardcoded array from this index file
here I'll come in here and I'll copy this hardcoded now hardcoded means uh it is just like in the code this way right
there's no way that this is going to be dynamic I'm going to change that uh here I'm going to paste that in here I'm
going to name it the same thing so I'm going to create a new variable called gallery and I am going to just paste
that hardcoded code there there we go and then I'm going to call this uh Gallery so again I have an array that's
what this this bracket here is this array of these objects that's what these objects are these these uh uh mustaches
they open up and the objects have these properties here and these are representing the picks that uh that
plug-in requires and now I'm going to use this callback function to return that Gallery array one really nice thing
about this toio 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 going to go ahead I'm going to save this and I'm going to deploy it
now one thing to note by default it was actually protected that's what this little uh key lock thing means here so
I'm going to click this and I'm going to change this to be public cuz we actually want anybody to be able to see it not
just twilio um so this is this is what we're going to do I'm going to change this to be public and then I'm going to
choose deploy all and you'll see that it's gray and when it's ready it will turn green for us um and so I want to go
I'm going to copy this URL so I have this URL already and when it's green when this goes uh to be deployed so it's
still deploying you can see it's deploying and you you'll know down here um when uh it'll say build completed and
it will say deployed so it's deployed so I copied that URL I am going to go hit that URL and let's see what we get back
awesome we got it so we got the the kitty descriptions and I blow this up a little bit here this is this is Json and
automatically built this for us right it put the it's in the right format uh which is very nice in fact we could
probably take this and why don't we we'll go over to uh the Thunder client and take a look at what's going on over
there so I'm going to come back to my thunder client I'm going to make a new request and I'm going to hit to do a get
to this this API that we just built and check it out it comes back it comes back with 200 okay and here's the the stuff
that's coming back there's even some headers in here uh oh sorry some some if we look at the response we can look at
the response headers over here and we can see uh that the the content type was set to application Json
twily always sends back the shenanigans none which I love so now what we could do is we could
give this URL to the team that's working on making the front end you know that that View application they could wire it
up they could take this and as long as we match the same format and 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 going to comment out uh this B so let's let's go ahead let's give it a uh we we're going to go ahead
and make this an empty array right so that's how you make an empty array and I'm going to 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 going to comment that out
and in fact I don't think I need uh the second one I'll just get that first one there get us some space there
awesome so now let's use the text messages that were sent in our incoming messages so
we're going to 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 to 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 and authenticated a twilio rest client from
the context object so context get twio client now remember that is uh going to be using my off token and my account sit
and it's on this context it just automatically is authenticated which is really powerful cuz 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 want to get a hold of all of the messages that were sent in so we're going to use the API to do
that um and remember we could have multiple phone numbers so I'm going to get the messages that were just sent to
this phone number so I'm going to await cuz remember it returns a promise so client .
messages. 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 going to look one more time at
my uh oh there it is uh yeah that's it so that's my my my phone number there 51685 433 you could go go 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 um and in fact
you know that's something uh you can have multiple numbers and that might be something that you want to uh store
possibly in an environment variable so I think we should probably do that let's let's do that so uh I'm going to take uh
this this number here and I'm going to store that here you can see 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 credentials my account S my off token to
inv so that's why context get twio client works is because we've checked this if not it won't work so uh but it's
checked by default so we're going to do twilio number and that value is going to be that and now um in my code what's rad
is I can use that like so I can say context. twio 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 uh you won't need to do that you will
need to set your environment variable though awesome so um and uh now what we've got to access to the well actually
first we set a wait and we need to make sure that this function is marked a sync um 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 going
to Loop through those messages um one of my favorite ways of doing that is this four of loop so we're going to say four
message of messages uh and for each one of those messages we're going to go through some things so
um one thing you might not have thought about before is that when you send a message you can put multiple photos I 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 um let me let's do that let's get a hold of all of the pictures
that are available um so we'll say comp pix uh we'll call we'll call our variable called pix
right uh for picture short for picture and we'll say await message now uh the message object that came back from this
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 we we walked through this before remember there's the media URL and we grabbed
that media URL we looked at all of them that were available this is basically doing that same thing and we're going to
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 picks right so we're going to make a new
variable called pick looping through each one of these that came back from from this array right so so um for all
of the the messages for all of the pictures in the messages now what we're going to do is we're going to add that
to this Gallery so this is an empty array but we're going to dynamically add to it and the way that you add to an
array of course is with uh gallery. push we're going to 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 the source right so Source
here SRC is short for Source um just from Forever in the internet uh so image source SRC and uh I know um from from my
my notes uh and I'm going to pop over here real quick um that that uh this this has uh the media resource has this
thing called a URI on it and it's relative to this htps twilio.com
so uh let's paste that so it's relative to that which means that if I'm going to display it I need to let our people know
if I'm going to give it a full URL which it it requires right it requires this full URL so it's got the the front part
of it and then I'm going to use the pick as a property called URI which we saw and remember what happens um is it has
this content type if if we want to it without an extension uh the media is returned now I know that by default uh
this is going to give me this pi. URI is going to end in Json so I want to replace that I'm going to use the string
method to replace uh the Json right I don't I don't want that Json I want it to be no extension at all um so I'm
going to use this empty string so I'm going to replace the end of what this pick was uh with Json I'm going to
replace that with an empty string which will remove it essentially right that's what we're going to do now I'm going to
do a comma because I want to do more I want to have the description I want to put uh the description here as required
uh 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 picks but I'm also I have access to this message CU
I'm in this inner loop here right so I still have access to the outer loop which is
message. body right so those are inflated um so that's whatever the text was that somebody sent it in and uh we
should also we'll make that the alt text too so alt tags are handy for um accessibility reasons there there are
people you might not think about this but there are people who um are going to use your application that are using it
without um being able to see some some people are vision impaired and uh they have screen readers and uh alt tags are
awesome for that you always want to 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 uh your
application more accessible and everybody wins by it and then finally I'm just going to grab this last
thumbnail width here 200 pixels uh we can see later if people want something different than that uh what to do so so
our Gallery array for each one of those pictures it's going to add to it right so so it's going to go and it's going to
add each one of those and we're still going to return that gallery and I think y'all I think we got it let's let's
let's walk it one more time okay so we're going to come in here and we are going to use the context that
was passed in uh to this function when it was called so when somebody hits this URL this function is going to run and
it's going to know it's going to have access to those environment variables that we saw it's going to get access to
an authenticated client and that client is logged in with my account Sid and my off token and we're going to create an
empty array this Gallery thing here we're going to create an empty array it's a list that we're going to populate
we're going to take our messages and we're going to push them into this array so that uh it has the format that is
expected which is right here we're going to turn what our messages look like into this so that uh later 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 going to 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 twio number and those are this this context here again this is
passed in and the twio number is set in my environment variables over here so we're say because because you could have
multiple right you could have multiple twilio phone numbers so we want to say only the ones that were sent to so we're
very we're being be very specific we're querying messages that were sent to this number not from this number but to this
number and we're going to Loop through each one of those messages and for each one of those messages um the object
that's returned from this has this property called media which lets us get to a sub resource and you remember in
the Json uh there was a 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 that for us it's very nice it's nice abstraction and we're we're going to get the list of
those picks and again this is asynchronous we're we're using this um 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 going to Loop through each of the pck and we are
going to push out um a source that has this it 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 um we're going to say
this is where it lives this is the API call that we want you to do um to get this content is api. twitter.com
whatever is in the pick you U cuz 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 um let's see if we if we look here we can see that it it ends in this dot Json
right and we want to get rid of that because 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 um so that will be removed and then we're going to
use the message and the message is coming from here right so the message for each of the these messages we're
going to get the message. body and the description and the alt tag for it the alternate text uh 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 uh 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 going to work through it um we might get an error we might not understand exactly what
that error is and we're going to work through it but I am going to save this and deploy it now I 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 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 um in fact let's go let's go hit it uh with our um let's hit that
same that same request I wrote before it should be a little bit different now uh it's coming across here and I want to
look at uh the response and the response I'm going to go and I'm going to grab this URL and make sure that uh 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 we should see my my
beautiful burrito oh look at this thing I believe that burritos uh when they can stand up by themselves uh that's a 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 going to store those photos that were submitted into a database right and you're going to do that from
this incoming message function you're going to get it you're going to store it if it's valid if it's it's a valid
picture you don't want to show pictures that aren't you're going to store it in a database and then you're going to
format it uh for whatever your client is you're going to get that from a database so maybe instead of coming back from
this API you're going to come from a database API and you're going to pull back uh your information and then you're
going to push it through and that database is going to 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 GNA it's not going to look exactly like the message
right I'm not going to send back uh one of these messages and make my API look like that I'm going to shape the data
that's what that's called I'm going to shape my data in the way that I want it 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 uh was expected all these
burritos are making me hungry I think I'm going to go fetch one from my favorite takaria I'll make sure to snap
a pick 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 going to 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 in 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 um and we scroll down here into this load images and this load images
gets kicked off uh from the API of uh Vue right so Vue has these life cycle apis and when the the thing's mounted
it's going to call this load images we're going to 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 got a suggestion here of what to start
uh doing here so I'm going to uncomment this so uh we're going to create a new uh 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 um 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/ API here um we don't need to specify the server right it's
assumed so uh our API we we called that right we called it API SLP so SLP is what we are going to hit there um 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 uh that response has a a method on it called Json um that will
actually return the Json representation of whatever came back so what I'm going to do is I'm going to get rid of this
Gallery this hardcoded gallery that is gone and I am going to say await we are going to await because this method is
also asynchronous response. Json so that's going to get back uh whatever is in this response that came back this
response has all sorts of uh metadata about it but we just want to get the data out of it and that's by using this
Json and because our API is Json enabled it's just going to come out all right let's deploy
it I cannot stop oops this says not unable to deploy because I didn't save it so I need to save it first I cannot
stop thinking about that bro 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 twio trial account right and it says uh 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 um so uh it's been deployed and I'm
going to come in here under this uh assets and I'm going to copy this URL and I am going to paste it here uh
and this View application is going to go and it's going to hit my API and it's going to 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 uh we
can go we can see my other uh beautiful burrito uh 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 lines and really it only took one line actually you know like if we we could have like chained
some stuff on top of this awesome now one thing that I do want to note is that there's no authentication at all to this
API right I could I didn't uh 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 want to pass your keys around like I would
not want to put my my twilio keys here on this page because I don't know if you know this but you can actually see
everything that that comes down so I'm going to view the source of this and you can see here's the source that we're
looking at and if I had used any sort of API keys I would see them right here you don't want to 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 A A
TMI W 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 I code that we wrote together should be considered restful 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 cach ability H 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 could 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 embeddable widget or some actual
JavaScript code this doesn't make any sense in our use case and that's totally okay so we're going to 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 r r currently we're just presenting all the messages as objects
and absolutely no way to identify them so we fail 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 that it should be Json decoded to be used hyper media as the engine of application State and last but
certainly not least hat Os or hate o 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 uis or links and we did see this in both the Spotify and twio ones however ours doesn't provide links to
other resources so we don't have a restful API and that's okay it's going to 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
[Music] [Music] [Music]
An API (Application Programming Interface) is a contract that defines how software components interact, hiding complex internal workings. It provides a set of tools and a consistent interface, so developers can use features without needing to understand the underlying implementation. For example, a radio's knobs are an interface that lets you change volume without knowing the electronics inside, and similarly, an API like string.toUppercase() works without knowing how the conversion is done.
REST (Representational State Transfer) became the dominant standard for web APIs because it uses familiar web tools like HTTP, URLs, and status codes, making it easy to learn and implement. It is stateless, treats everything as a resource, uses standard HTTP verbs (GET, POST, PUT, DELETE) for CRUD operations, and returns data in JSON format, which is simple to parse in any programming language.
In a REST API, HTTP verbs correspond directly to CRUD operations: GET retrieves data (Read), POST creates new resources (Create), PUT or PATCH updates existing ones (Update), and DELETE removes resources (Delete). Endpoints represent specific resources, such as /artists for all artists or /artists/{id} for a single artist, and you choose the verb based on the action you want to perform.
JSON (JavaScript Object Notation) is the standard data format for REST APIs because it is lightweight, human-readable, and easily converted into objects in virtually any programming language. When you query a REST API (e.g., Spotify's search endpoint), the server sends back data as JSON, which your code can parse and use without complex transformation.
curl is a command-line tool for making HTTP requests directly. To test a REST API, you construct a command with the HTTP method (e.g., -X GET), the endpoint URL, and any required headers like an authorization token. For example, curl -X GET "https://api.spotify.com/v1/search?q=Beyoncé&type=artist" -H "Authorization: Bearer YOUR_TOKEN" sends a request and prints the JSON response, letting you see exactly what the API returns.
To use the Spotify Web API, you need a free Spotify account to obtain an access token, which acts like a password and must be sent in the Authorization: Bearer header with every request. You also need to know the correct endpoints (e.g., /v1/search for search, /v1/artists/{id}/albums for albums) and that responses are in JSON format. The video demonstrates using the interactive console on developer.spotify.com and the curl command line tool to test these endpoints.
A RESTful API must follow several constraints including client-server architecture (separating the user interface from data storage), statelessness (each request from a client contains all the information needed), resource-based URLs (e.g., /artists/{id}), use of standard HTTP verbs for CRUD operations, returning representations of resources in a format like JSON, support for caching to improve performance, and a layered system that hides intermediate servers (like caches or databases) from the client.
Keep this summary
Save it to LunaNotes and it becomes a real note in your library — editable, searchable, and ready to turn into flashcards or a diagram. Free to start.
Save to LunaNotesOr summarise for another video.
32K+ people have turned 65K+ videos into notes
“Very useful tool. I'm using it for the last couple weeks and I'm loving it so far. Makes learning on YouTube a great experience.”
This summary and transcript were automatically generated using AI with the Free YouTube transcript summary tool by LunaNotes.
Related summaries
Comprehensive Introduction to API Testing Fundamentals and Tools
This session covers the basics of API testing, including client-server architecture, types of APIs, and key testing methods. Learn how APIs function as intermediaries between front-end and back-end systems, the importance of API testing, and the tools like Postman and Rest Assured used for manual and automated testing.
Understanding APIs and Building Your First AI Assistant in Python
Learn what an API is through a simple restaurant analogy and build your own command-line AI assistant by the end of the first day. This hands-on tutorial emphasizes a build-first philosophy, requiring minimal setup.
HTTP Protocol Fundamentals: Statelessness, Methods, CORS, Caching, and Status Codes for Backend Developers
This comprehensive guide explains core HTTP concepts every backend developer needs to know, covering stateless architecture, request/response headers, methods, status codes, CORS flow, caching strategies, content negotiation, and large data transfer. You'll learn why HTTP is stateless, how browsers handle cross-origin requests with preflight checks, and practical ways to optimize performance using caching and compression.
.NET Full-Stack Interview: C#, SQL, Web API & React Concepts Explained
In this mock interview, a full-stack developer with 3.5 years of experience is quizzed on key .NET, SQL, and React concepts. Topics covered range from C# fundamentals like IEnumerable vs IQueryable and async/await, to SQL indexing and normalization, as well as Web API middleware and React hooks.
Python Mastery Course: Complete Beginner to Pro Guide (2024)
Learn Python from scratch with this comprehensive guide covering variables, strings, numbers, and essential programming concepts. Master Python for AI, web development, and automation with step-by-step tutorials from an experienced software engineer.
Most viewed summaries
A Comprehensive Guide to Using Stable Diffusion Forge UI
Explore the Stable Diffusion Forge UI, customizable settings, models, and more to enhance your image generation experience.
Kolonyalismo at Imperyalismo: Ang Kasaysayan ng Pagsakop sa Pilipinas
Tuklasin ang kasaysayan ng kolonyalismo at imperyalismo sa Pilipinas sa pamamagitan ni Ferdinand Magellan.
Mastering Inpainting with Stable Diffusion: Fix Mistakes and Enhance Your Images
Learn to fix mistakes and enhance images with Stable Diffusion's inpainting features effectively.
Pamamaraan at Patakarang Kolonyal ng mga Espanyol sa Pilipinas
Tuklasin ang mga pamamaraan at patakaran ng mga Espanyol sa Pilipinas, at ang epekto nito sa mga Pilipino.
How to Install and Configure Forge: A New Stable Diffusion Web UI
Learn to install and configure the new Forge web UI for Stable Diffusion, with tips on models and settings.
Found this summary useful?
Take it with you. One click puts it in your own LunaNotes library.
Save to LunaNotes