Transcript for:
Beginner's Guide to Understanding APIs

This course is an excellent introduction to APIs for beginners. This is an updated version of what is already one of the most popular API courses on the Internet. Craig Dennis is back as the instructor and in my opinion he is one of the best developer educators out there. - Hello, I'm Craig and I'm a developer. In this course, we are going to be exploring a term that you've probably heard quite a bit. That term is API or application programming interface. In addition to being able to recite what it stands for, when you complete this course, you'll be able to discuss what an API does. You'll understand why they exist and you'll be able to list the many benefits that they provide. You'll even get some hands-on experience using a few popular web APIs, which will give you a taste of what all this excitement is about. We'll be starting from the very beginning, so there really isn't too much I'm gonna be expecting you to know before starting this course. I would like to request that you have a touch of experience with coding and a wee bit of knowledge about the web. If you've written any program at all, even the typical first program, you know the one where you write the words, "Hello, world." If you've done that in any programming language, you'll pretty much be ready for this course. It will be helpful if you have a basic understanding of how the web works with web servers and browsers, but don't sweat it, we'll touch on that too. Now, if you haven't met these requirements, please check the notes attached to this video for where to get started with some beginning web and programming concepts. That reminds me, you should take some time to get used to your learning environment. The notes that I just discussed are attached to this video and I'll also drop more information into that section to keep you updated on what might have changed from my right now to your right now and I'll do my best to remind you to look in there when there's something I think you just have to see, but you really should get in the habit of checking that area out. There'll be tons of juicy information there. You might be getting a real bad case of deja vu right now. This is a refresh of a course from 2019, which these days seems like about 30 years ago or something. If you saw that version, welcome back. Technology is constantly evolving and just updating the notes wasn't cutting it, so this is version two. Thanks for all the feedback, by the way, a lot of yours and your fellow learner's suggestions are implemented in this new updated version. All that to say, we got you. These videos have captions, so if you feel like you might benefit from having those on, please use them. This space is all yours. If you want me to speak slower, please use the speed controllers to slow me down, and if I'm taking a long time, speed me up. I make a pretty good chipmunk. And last but certainly not least, take advantage of the fact that you are in a video-based course. If you need me to repeat myself, use the video controls to rewind me. If you feel like you need to take a break to let something sink in, by all means, please pause me. I'll be right here waiting for you. I know that I've gotten into some pretty bad viewing habits with all this streaming media. Now, while binging might be a great way to consume an entire season of your favorite show, it's not the best way to learn something new. Education isn't meant to be binged and because of this, I'll probably remind you quite a bit to take breaks and encourage you to let what you just learned marinate. All right, let's get to it. API, those three little letters generate quite the buzz, don't they? First, I'd like to take some time upfront here and clearly break down what is meant by application programming interface. By understanding its purpose and a touch of its history, I think you'll start to see its importance and begin to understand why this term keeps popping up in your life. After we get a good grasp on the what and the why of APIs, we'll go and learn how to explore two existing ones. We'll get familiar with several handy tools that you can use to interact with web-based APIs. We'll use those tools to hit an external web API to send actual text messages and we'll get some inteRESTing data back from a streaming music service API. Once we get some practice using the APIs, we'll use them in a web application that you'll actually publish. The application that we're gonna be building is going to receive user submitted photos via a text message, and then we'll use an API to display a collection of all these photos and you get to come up with the prompt. Send me the latest photo on your phone, dog pics, please, what's for dinner, whatever you want. I can't wait to see what you build and what your family and friends submit to it. We are going to be strictly using APIs in this course, we won't be writing our own. While you most likely are gonna end up learning some best practices in API design, we won't be covering that specifically. There are many great courses available that show the creation thought process, and I've linked to some of my faves in the notes attached to this video. In my opinion, the best way to start learning about any acronym is to focus on each individual letter. For API, I think we should start on that last character, the I, interface. Let's talk a bit about the interfaces that you've seen already. Interfaces are all around us. For instance, this radio here, it has a familiar interface. The interface allows me to do things like change the volume, change the station, I can turn it off and on. I literally have no idea how anything inside this thing works, but still the interface allows me to control the way that it works through the options that are exposed and that's pretty great, isn't it? The magic that is happening is completely abstracted away from me. I'm still in control of what has been determined that I, a user can handle. Interfaces usually evolve over time, like an alarm clock radio for example. It has my familiar volume and station controls and it also adds some new features like changing the time and setting the alarm. I still have no idea how this works implementation wise, but the interface is something that I can understand. Usually, and as technology evolves and new options come into existence, they make their way into the new versions of the interface. Still abstracting away things for us, but enabling us to be in control of the new features. Sometimes these physical interfaces get so recognizable, they even make it into GUIs. Hey, did you hear that? There it is again, GUI, G-U-I, graphical user interface. This is my streaming music app on my phone. There's my familiar Play button in the user interface or UI, and I know what the Play button does when I press it, but I have no idea how it does it and I'm okay with that level of abstraction. What would I do in public transit without music? Like, talk to people? Hi, how's it going? Now, the developer who wrote this streaming music application, of course, understands how the Play button works. She coded the button so that when it gets clicked, the music starts playing. Here's the thing though, our developer is also working with quite a few interfaces that are abstracting the way some of the details for her. For instance, she wrote code that happens when the button is clicked. She probably did that using an event handler on the button, like onClick. What she didn't have to do, however, was write the code that makes the button interact and change with the press. She didn't have to write the code that makes that familiar clicking noise. It was already there for her. Buttons are, in fact, an interface. They provide the developer the means of controlling its interactions while abstracting way how that actually works, implementation wise. This button is part of the API or application programming interface and it's available from the application framework that was used to create the app. Because most apps need buttons, this interface has been created and provided to our developer or application programmer to use. By implementing the button interface, our developer was able to make her code run when the button was clicked. It's worth noting that the code probably also uses a media player API that is provided with the operating system of the device like Android or iOS. This media player API abstracts away needing to understand details of how to send audio data to hardware. The developer knows they just want to call the play method on the media player API. I suppose too, the song isn't stored on the device, it's being streamed over the network, so a web-based API call has been made over the internet to get that data. It's actually APIs all the way down to the ones and zeros providing abstractions at many levels, so let's take a look at what all of these interfaces have in common. They all define ways for us to interact or communicate with an object, whether that object be physical or software, and as a user of the interface, we don't need to understand the implementation, we don't need to know how it works. We just need to know what we've been allowed to change or see, interfaces abstract away the implementation. Now, while the UI or user interface is made for the user of the application, the API is made for the application programmer to use and extend in their applications. With the I covered in our API, let's take a deeper look at the REST of the API acronym. An API is a contract of sorts. It defines how it is expected to be used and it defines what you can expect to receive by using it. Think of it as a set of tools designed for software developers like yourself to use. An API is created to help make your life easier by giving you access to data and by providing you with an abstraction of the implementation, you know, not needing to know how it's doing, whatever it's doing. They save you from needing to create everything yourself, like when designed well, they make nearly impossible things happen with just a few lines of code. Now you're probably starting to see why it's important to get familiar with them, right? I want to do a quick word of warning here about some naming issues that you'll probably run into. These days, the term API is almost always used as a way to explain web-based APIs. In fact, it's probably safe to assume that when you hear API in the wild, it's most likely that people are talking about a web-based API. We'll explore those here in a few. However, if we focus on all types of APIs instead of just the web-based subset, we'll get a better look into why web-based APIs are so popular, so hang tight, we're getting there. APIs are everywhere in your software journey just about everywhere you look, your programming language, whichever one that might be, provides many APIs. Let's take a look at one that is common in all of them. They all provide some way of working with strings, you know, like a series of characters. Wanna make your text all uppercase? Just call the API method and voila. You could probably create the uppercase string all by yourself by doing some sort of low level bit math on each character, but you don't need to because your programming language has abstracted away that for you and provided a handy string API. It exists because this is a common enough problem that developers run into. Because these programming language specifications are just interfaces, different operating systems can supply their own implementation so that the code works properly in their environment. I think an easy way of picturing this is to think about how different operating systems like Windows or Mac OS maintain their files. They're totally different, yet your programming language provides a single API for working with the file system. You can write one script and it works both in Mac and Windows. It's the implementation that takes care of all the details for you, pretty cool, right? Definitely something to be thankful for. It makes our lives so much easier not having to worry about what operating system is being used and the importance of an API tool language cannot be understated. There have been some fascinating legal cases where it's been questioned if the language API itself, again, not the implementation can be copyrighted, check out the notes for more on that. Along similar lines, there are different web browsers, you know, like Google Chrome, Microsoft Edge, Safari, Firefox, Brave. Now, you might not have pondered this before, but isn't it amazing that you can write code for the web and it will work in any of 'em? This works because there's a set of web APIs that web browsers all must implement in order to make that magic happen for you. We are standing on the shoulders of giants, folks, and we really should thank those giants more often. There are authors and maintainers of libraries that package up code to solve common problems so that you don't need to do it yourself. For instance, do you know how to programmatically make a photo black and white? Me neither, but I can download and import an image package into my application and suddenly I can. I just call a method and boom, I wish real life skills worked this way. I'd import dancing so I could be more fun at weddings, cha cha cha. Frameworks provide an API that allow you to extend what has been provided to make it your own. Like for example, most web frameworks provide you with the ability to add a new route to your web application. It allows you to write out dynamic data to a template that you specified, and you do all of this with just a handful of lines of code. You don't need to understand how it's doing things, but you do need to know how to write an implementation to what the framework is expecting. In this case, you're using the API, the contract, to write a valid implementation that meets the requirements. Now, all these APIs that we just talked about, they're local to our code base, they exist within our code. We use them to avoid recreating the wheel. That is to say they assist us in accomplishing tasks that we need to perform by abstracting away a ton of the work for us, the stuff that we developers shouldn't be worrying about. We should be focusing on the business problem at hand, and that means a big part of your job is figuring out how to leverage these APIs to your advantage. Now, I think this is an excellent time for you to take a break. I just gave you a lot to think about and I'd like you to take some time and breathe. Why don't you jot down some APIs that you've used today? Even if you weren't coding, I know that you've seen some in action. If you're having a hard time thinking of some, I'll give you a hint. You're watching a video right now inside of a web browser. When we return, we'll explore the concept of remote APIs, ones that aren't executing locally in our code base and why that is such a powerful concept. (upbeat music) It took me a while to find this remote control. It was in the couch. It's always on the couch. Anyways, this remote has an interface on it, right? There's a Power button and when I press the Channel button, it changes the channel, when I press the Volume button, it sends the request to my radio and the volume changes as if I turned the volume up using the interface on the device itself, and we know why that's important. I want to remotely control my device. I don't want to get up from my chair. There are of course, more or less lazy reasons as to why we'd want to remotely control objects. This cute little robot, for instance, has a remote API. You can send commands to it and it responds and it even sends back sensor information. These traffic signs can change based on an API call. This drone here is remotely controlled by an app on my phone, see? (drone whirring and crashing) And it's not just physical objects that benefit from remote APIs. Oftentimes we don't have space on our local machines for all the data that's available, like for example, have you ever used one of those apps that helps you figure out what song is playing? You send up a snippet of a song that you heard playing at a grocery store using your microphone, and it sends back exactly what song it is. It's usually Phil Collins. It turns out that both grocery stores and yours truly love Phil Collins. You don't have room for all the songs in the world on your phone and with this remote API, you don't need to have all of them. It does all the searching and processing and it's surprisingly quick. How can it possibly do that? I don't know, but I love the interface. It's so fast. Ooh, that's another benefit of remote APIs, computational power. Because an API removes the limitations of your local device, you can gain access to seemingly infinite amounts of power. A good example of this is the AR app of Google Translate. You can use the camera on your phone and in near real time it's able to translate directly to your screen, like instantaneously. It's using a ton of processing power to make that magic happen and that processing is happening elsewhere, "en la Nube." It took quite a bit of experimentation and some evolution of ideas, but over time, we finally turned this remote API dream into a reality. Now, I'm gonna drop some history into the teacher's notes, but I just want you to know that the struggle to achieve this concept of remote APIs was very real. Now, most of the problem was that there wasn't a standard that everyone loved. Things were pretty clunky for a while as these ideas were sussed out, but then it happened. A new architectural style appeared that was clear and allowed us developers to interact with specific resources over the web and it quite literally changed everything. This style rapidly emerged as a winner and just about everyone began offering and consuming external APIs over the internet. Now, what I'm talking about here is REST, or representational state transfer. It was the approach that we needed and honestly, it's the abstraction that we developers deserved. Like we talked about already, the popularity of REST spread so rapidly that it nearly completely overtook the term API. It's like how we use the word Xerox to mean photocopy, even though Xerox is just a brand of photocopier. Xerox does other stuff too, I think. That's how pervasive REST is. REST is for sure not the end all, be all of remote APIs. There are definitely some limitations which we'll discuss here in a bit. Technology's ever evolving and of course there's movements that are still advancing the concept of the best remote APIs. Some terms you might even have heard, like GraphQL, more on this in the teacher's notes. Now, for the rest of this course, we are going to do a deep dive into APIs that are written using the REST style. When APIs embrace the style and constraints of REST, they are said to be RESTful, cute, right? If you feel like you need a little rest, go ahead and pause me before we do a deeper dive into what it means to be RESTful. Sorry, that was a bad and obvious joke, but as a developer you kind of have to make it. You don't really have an option. Because REST sits on top of web technologies like a really nice hat, we should probably do a whirlwind refresher of how the web works. (upbeat music) It might have been a while since you thought about how the web works. There are a smattering of terms that I'd like to reload into your working memory before we talk more about how REST uses them. So let's use the web, I've got my computer here and on it is an internet browser, the browser is a web client and I'm going to use it to connect to a server. I'm going to do this by putting a location in the address bar, a universal resource locator or URL to be exact. You might also hear this referred to by its superset term URI, universal Resource Identifier. Now our URL here has a scheme portion and this one happens to be HTTP. HTTP stands for hypertext transfer protocol. Let's break that down a bit. Let's grab that last part, protocol. A protocol is also often likened to a contract. It's a little lower level than an API, but it's similar in concept. You can think of it as defining the expectations of how to communicate. Like an example that I think really sticks with me is if you've ever been to a rally and someone does one of those chants where they're like, "When I say 'Fu,' you say "Bar." Fu, bar, one of those. Here, let's do one. When I say HTT, you say P, HTT, HTT. Oh, I just realized I might have made you yell "P" out loud. Hope you aren't in a coffee shop. Awkward. Anyways, we, you and I just set up a real quick protocol. I told you how to respond to my specific request and you would've been breaking or agreed upon protocol if you yelled anything else but P, so the browser creates an HTTP request for you, along with the URI, it also specifies a particular HTTP verb. In this case, it is using the get verb, which is used to clarify that this request will only receive data. That is, it won't be making any changes. The server receives the request that was transferred from the client. There's that second T. The server then does the work that it needs to do. Finally, it generates the resulting webpage and sends back a response to the client, my browser, in this case. The most important part of the response is the body. For a webpage, that contains the HTML, hypertext markup language, which gives us the remaining parts, the HT of our acronym. Hypertext is text that can link to other texts. In HTML, we perform that linking with anchor tags, so with that response, the browser renders the page. When one of those links are clicked, they kick off a brand new HTTP get request and the process repeats itself over and over. In between those clicks though, the protocol's done, we've made the request, we got the response. HTTP, as it was originally designed, is a stateless protocol. Once that request receives a response, it's all done. If you wanna keep some sort of state, your client will have to manage that itself and send it up with each new request. Check out the notes for more on this. There are more http verbs, also known as request methods besides get, most common scenario you see is when you encounter a form that is used to take information from you. Typically you'll see the verb post used to explain that you are submitting or posting data to the server. Okay, so our protocol that's used to transfer this hypertext is admittedly a little more complex than our rally chant was. There's quite a bit of important information in there that is included in the request and the response. You've probably seen query string parameters in URLs and you know the stuff after the question mark? This is one way to pass information about the request. Another common way this information is passed around is through specific key and value pairs called headers. Both requests and responses have headers and they're used to help further communicate what is wanted as well as what has been sent back. Some of the popular request headers allow you to specify information about the content that you expect back, like the language or the type of content. You can also state that you want the page if it has changed since a certain time. This technique allows for caching, which is a powerful concept. Why get the whole page if you already have it in your local cache? You can embed authentication information in each request using a header. In this way, you're essentially keeping your client logged in across requests. This response also contains headers. A super important one is the status code. This lets you know what happened on the server side and can convey things like missing documents. I'm sure you've seen the old 404 or maybe the page has moved, but hopefully everything is a 200 OK. It can also explain the content type, how large the data returned is, and many more things. Okay, got it? Are you feeling good about that little whirlwind tour? Remember, feel free to make me repeat myself if that was too much, I totally get it. That was a lot of information. It's important to have a basic understanding of these things because REST sits on top of them. It uses the concepts that were introduced with the web to expose resources that can be accessed and manipulated. Let's take a look at how the RESTful approach takes advantage of the web and its tooling for your benefit, profit. REST stands for representational state transfer. APIs that meet the REST architectural style constraints are considered to be RESTful. Now, a typical way to teach about RESTful APIs is to cover the constraints that define it all upfront. Now, I don't know about you, but personally I find approaching learning that way pretty overwhelming, especially from the beginning. I mean, we haven't even looked at an API yet. On top of that, most of the REST APIs that you'll use will meet all of these constraints. So here's the thing. I promise that we'll go over all the constraints, but let's do it on our own time, like don't learn 'em all right this instant. We could even make it a fun journey, like a RESTful constraint scavenger hunt, complete with prizes, avoid where prohibited. Here are the guiding architectural constraints required for an API to be considered RESTful. We'll check them off when we discuss them and then we'll loop back once more at the end to review. Gotta collect them all, sound fun? Good. Let's get started talking about how REST API sits on top of web technology, like a little hat, much like the web, the client makes a request to a server. The client in this case is typically going to be your program and you'll probably be using some sort of library to create the request to the server. The protocol used, you guessed it, it's HTTP and it's stateless. The server won't remember anything about the particular client. If you wanna maintain state like your login details, you must send it with each and every request. You'll do this using headers and just like that, we talked about two of our REST constraints, client server architecture and stateless. You got two knocked off already. You're on a roll. Now, we should probably talk about what that request was requesting, right? Well, it most certainly was requesting information about a resource. Now a resource is a little abstract and that's intentional. It's the R in the URL or URI. We use the term resource to reference an object. Also happens to be pretty abstract, right? And this is because we can use resources to describe just about anything that we build. For instance, let's imagine an e-book store website. On the homepage, there's a list or collection of new books. Each of these books is a resource. We click in to take a closer look at that book resource and we see a link to the author, which is also a resource. We click into the author resource and we see a collection of all the other books they've written. Maybe we even see a group of fans, again, another collection, and each of those fans are a resource. Clicking into a fan resource, we see a collection of their favorite authors and books. Everything is a resource. Let's change gears. How about an image sharing application on your phone? So we have user resources and those users post photos, which are resources, and those photos can be loved. So there's a lover resource, maybe there's an album that could be created. There's an album resource that contains photos and albums have a collection of contributor resources. Turns out almost everything we ever want to build can be expressed in terms of resources and collections. Most of what we want our applications to be able to do to the resources can be expressed through the unfortunate sounding acronym CRUD, and that stands for creating, reading, updating and deleting. Now, as a user of the e-book site, all we did was a bunch of reading, no pun intended. I actually did intend that one. We were reading, right? Just getting information to display it like we retrieved the author page, we made a read request. The web browser used a get request to the specific author page. The RESTful API follows the same logic, your program sends a get request to a URI. Then the server responds with data and of course all the HTTP headers you've come to know and love. The body is typically represented these days as JSON or JavaScript Object Notation. JSON provides a great way to structure and nest your data. Every programming language that I can think of provides some means of turning a JSON string into a native object. The content type is typically something that you can specify in your request if JSON isn't your thing. If you recall, there are other HTTP verbs available. These verbs are used in REST APIs to clearly state the intention of your request. Wanna add an author? Host to the /authors endpoint and send the data that you want to update in the body of your request and these fields will be defined for you somewhere. Wanna remove an author? Send a delete to that specific author resource. Updates typically support the patch verb, and you'll see we're able to represent our CRUD needs, the create, request, update and delete using HTTP methods. Pretty cool, right? What this means is that you can interact with any application out there that's exposed their REST API. You could grab data, remotely automate tasks, and even smoosh together different services. This is called a mashup, and here's the thing, there are a ton of APIs available, just about anything that you can imagine, and if they're truly RESTful, they'll all feel pretty much the same. You can build anything, there are services that allow you to do incredible things with just a few simple API calls. So now the question becomes what are you gonna build? So why don't you take a quick break and when you come back, let's explore a RESTful API together. We'll take a peek at how to use the music streaming service, Spotify and their excellent RESTful API. (upbeat music) You have some newfound understanding of how web-based APIs work. I walked you quickly through some imaginary REST APIs and now I'm thinking it's time that we get a little more specific. Why don't we go exploring together? Some of these REST APIs allow you to give it a try from the comfort of your very own web browser. One of my personal favorites that allows for exploration is the streaming music service, Spotify. So here I am at spotify.com. Now, a quick word of warning, it is going to look different. I guarantee you this site is gonna look different because they're always making things better for us, for us Spotify users, us lovers of music, and as well us developers. So I want you to try this. When you go to a site, any site that you want to, you'll see here that this is really nice, Spotify's letting us kind of test out what it feels like in the web, on the webpage. But if I scroll down to the bottom, that's typically where they hide nerdy stuff. Now, I knew this was here, but if I didn't, I would look around for something like this, this Developers, and I'm going to click into here. Oh, I cannot tell you how good it feels as a developer to end up in a place where it feels like you're being taken care of, right? This is so nice. The Spotify for Developers, it looks like it was thoughtful and I can tell you that it is very nice. It's a very nice tool. You can scroll down, you can see all sorts of stuff. They give you some examples of what you might want to do, right? What could you build with this? So you could find out like different things, like you could use the API to see the beats and the sections and the bars. I think that there's a way to figure out if a song is danceable or not. So maybe I could import dancing. We'll see. And if I scroll back up to the top here, you'll see that there's these different headings. We've got this Discover, I think this is great if you're going to explore things, we have this Docs, you'll see that there's all types of different, actually, APIs and SDKs, software development kits, which are APIs, which allow you to do different things. You'll see that there's ones for iOS, there's ones for Android. What we're gonna be focusing on is the one for the web APIs. So if I click into that, we'll get a nice overview of what this is. I'm gonna blow this up just a little bit. So you'll see based on some simple REST, representational state transfer principles, that's what we're doing, that's what we're going through. We're going through our scavenger hunt. We're going through that. There's a Spotify web API that returns JSON, JavaScript Object Notation about music, artist, albums, and tracks, right? So that's awesome. That's great. So we can see all sorts of different stuff. It opens up at this api.spotify.com is the specific URL and then it has a set of endpoints with each unique path, right? Each of those URLs that we were looking at before, there is a way to get specific data. So you could do this thing where you authorize. So, I could be a user, you could see what I recently listened to. I could have a playlist, I could add to it. But in order to do that, you need to have authorization to be able to do that. You don't wanna be able to just add to anybody's playlist, right? So there is some authorization that's available and we are not gonna do anything that requires that here. So if you keep on looking down here, you'll see that there's, it's based on those REST principles and you'll see that it does get to retrieve resources, right? And there's the post to create resources, and again, resources here are songs and artists and tracks. Maybe the resource you're creating here is one of those playlists that we talked about. You can change using a put and a delete will delete the resource. So awesome, right? So it's using REST like we saw. You'll see that Spotify uses this URI style. So it's a Spotify track and then it has this unique ID, this Spotify ID. This will make more sense as we dig into it a little bit more and then you'll see that there's always this Spotify URL that allows you to see what it was. And it will show you this as well. As we said, the responses come back and they are a JSON object and we're gonna be looking here at a tool in the future called Curl, which you can use from your command line. That's what this dollar sign here is talking about. I'll show you all this, but basically it's saying that there's a lot of artists that come back. You don't want all the artists in it, it will come back paginated and of course, you can use caching. We'll take a look at that here, you can see if the thing has changed or not. So we'll take a look at that and basically the response that comes back, if everything's good, it's gonna say a 200 or these, these 200 level accounts. And then there's bad requests. So if you ask wrong or maybe it wasn't found, that's the 404 or unauthorized, if we try to do one of those playlists, we get an unauthorized and there's also if you're a developer, you never wanna see this one, it's the 500. It means that you made an error on the server side. We won't be doing any of those 'cause we're just gonna be hitting somebody else's code. Cool, all right, so Spotify offers the ability to, you can look at this and you can build your own curl request, but one of the really nice things that I love about their API, and you'll find this happens often, if we scroll back up here to the top, sorry if I'm making you sick there, we're gonna jump in here to what's known as the console. Over on the left are the things that we can do with their API and one of the things I wanna do first is I want to search and you can see it's making a get to the search endpoint. So I'm gonna go into there and what's really nice is it's set it up so that we can kind of build the query that we're looking for. So now we need to decide what we're gonna do. I think probably the first person that I would ever search for, the first artist I would search for. And you can see that here it's showing the different values of what that is. I would probably search for Beyonce. I mean, right, wouldn't you? And I could choose, is that a track or an artist? So the type there is important, and if I type artist, you'll see that what's happening is you'll see the curl here is changing, it's changing the, it says the cue is the Beyonce. So that's one of the parameters that we're passing into the API and artist is here. And you can see there's different things that we could do here. What's really important is that it needs to have this OAuth token. Now what's nice is we can build one of those even if we don't have a Spotify account. So I'm gonna do that. I'm gonna click this Get Token, I am not currently logged in and I actually don't have a Spotify account yet in this user. I do have a Spotify account. I love Spotify. And this is asking, basically what you would do is you would create a specific OAuth token. If you were ever to use this API outside of where we're doing this right now, you would create one of these tokens so that you could log in later and you say what it is that you want. So here's the playlist, right? We don't, we're not gonna do any of the playlist stuff, we're just gonna do a search. Maybe we'll look up some of Beyonce's tunes, but, so I'm gonna go and I'm gonna click this Request Token. So now it's asking me to either log in with my Spotify account, which I can, or I can create a new one, and let's walk through that just in case you don't have a Spotify account already. Let's create a new one. And this will be at my developer account here. So I'm gonna put in my email. So my email, I don't know if you know about this, but if you use Gmail you can do a little plus sign and it will still send to the left side of your Gmail. So I'm gonna do at Spotify sign up and that way any emails I get from here, it will have that. And it's kind of a way to let you have multiple accounts. And I think, so again, my Gmail is craigsdennis@gmail.com, but I'm gonna do SpotifySignup@gmail.com and it will go to my Gmail. It'll just kind of ignore this, Gmail does that for you. It's pretty nice, right? So I'm gonna put in the same password as my luggage, which is 1, 2, 3, 4, 5, 6, just kidding. And what should we call you? Oh, you know what? I love it when you call me Big Poppa, that will appear on my profile, I am ready for it. And let's see, it is my birthday on November 19th, 19. Let's see, what do I, I think, wouldn't it be nice if I was born in 1999? What is your gender? Oh, this is nice. How nice. This is like super inclusive. I love that this is so inclusive. It's like somebody at Spotify went and talked to their people and listened to what people wanted and they included people who identify as non-binary or other, or prefer not to say. So like wherever you sit in that I love and hats off to you Spotify for being inclusive, 'cause inclusivity matters. Share my registration data. Sure, why not? I am not a robot. I don't think I am. Oh, oh no. The images with bicycles. That one's got a bike. That one's got a bike. That one has a bike. Oh, what is that garbage there? Is that, this is a bike lane. This is a bike. Okay, here we go, please. Okay, I am not a robot. Thank you. All right, so I'm gonna click Sign Up. Oh, I am male. I am male. So here we go. That's how I identify. All right, I'm gonna save that log in and I am going to log in with it. So here we go. All right. So it's asking me if I have access to this developer console and it'll see my logged in as Big Poppa, here we go. And now you'll notice here that there is this token here, right? This is this OAuth token that got created for me by Spotify and it's putting it into this console for me so it can share it. Now you never wanna let your token out. If you get a hold of, somebody gets a hold of your token, they can do stuff on your behalf. And I realize that this is on a screen being recorded and I'm going to get rid of this token here in a bit. So you will not be able to have it. So I've got this token, it's filled out here. I'm gonna click Try It and we're gonna do a search for Beyonce. Let's see what happens. So you will see that we got some information back. So we got a list of artists, 'cause that's the type that I searched for. And this is the search that we did. We'll see some external URLs and we think that this is probably her. I'm gonna see, I'm gonna grab this really quick, but you can kind of see how things are laid out here, right? So this is my Spotify URL for that. Let's see if this is her, this looks like her. Yeah, yeah, definitely. So, great. "Crazy in Love," "Cuff It." I haven't heard that one yet. Awesome. So this is Beyonce, great. So we got her, we found her, we used this search. It has, shows how many followers she has. Wow. 32 million. Good job. And it tells the the genre. So we can do all sorts of really cool stuff with this. And it's here, you'll see that I'm getting a URL, I'm getting a link that will open up her specific artist page, right? So, here is her ID. So if I take her ID, I'm gonna grab this ID and I'm gonna come over here to Artists and I can come in here and I can show all of the artist's albums. So you'll see it'll be artists/ID/albums. Let's see all of the albums that she did. But let's look at that in JSON format. So the artist that I want, I'm just gonna pipe that ID in there from before, right, now it still has my bearer token. The console has done that for me and I can go ahead and do Try It and we should see that now, it's gonna return back albums, right? So we've made a get request to the albums and I can see all of the albums that she's had here and we can see where they're available in different markets as well. Looks like she's available in lots of markets all over the world. Who runs the world? All right, so here we go. We are going to look, let's see, these are albums. That's the artist there. That's the type of the artist. Let's get one of the albums here, let's make sure that we got it. So you see that it's got different things like I could get access to maybe the image of what this album is. So let's do that, I'm gonna post that here, open that up and let's see, there she is on her horse, her magical horse there. So that's pretty cool, right? This is awesome. I can get access to all sorts of information about an artist I can get by their ID. I can go and find all sorts of different things that I wanted to do, right? So, if I knew an album too, once I have the ID, I could get the ID, I could get the tracks, all sorts of amazing things. And then there's these playlists, right? So you can add a playlist, if I wanted to, I could post to create a playlist. Now of course I need to authenticate to do that and that's a little bit of what we're doing here, but I could add, put together a playlist for everybody to do using this API. And again, when we are looking at the artists, when when we're looking at this get artist, it's showing this curl command and we're gonna take a look at that here in a bit. But I just want to take a little bit of time. I want you to go and take a look, go back to this Discover section and kind of get inspired by what's available, right? So you can look at, there's these different things where you can, I was right, you can check and see if there's danceability of a song. You can go and find a track and is it danceable and you know that Beyonce's is, the songs are gonna come back very high in the danceability thing there. But lots of powerful things and there's lots of cool examples that you can do that people have already gone and built. And you can take a look at how they built it and how they use the API recommendations. This is awesome, really this is like super wide open to you and you can do all of this because of the APIs that they provide. Pretty cool, right? You can get access to all of Spotify's music library and you can build tools that extend their platform. I highly recommend that you go and take a look at what other people have built using these APIs. It's super impressive. Did you notice how fast those results came back? How could it do that search so quick? Oh wait a second, does it even need to? Those results don't change all the time. It's not like Beyonce is dropping a new song every minute, though I wish she would. Those results are definitely cacheable, ding, ding ding. Cacheability is also available on the client and we'll get to that here in a bit. But this is a great example of a layered system. I'm almost positive that Spotify has set up things so that it returns the same JSON from its own server side caching mechanism. It's not rendered that on every single request. As a user of the API, I don't know how it's doing that and frankly, I don't care. I want it to be available and fast when I hit that specific URL. Beyonce definitely appreciates how fast the results will return. She might even take that API dev to Red Lobster. Let's go ahead and take a quick break, during this break, I'd love for you to move around and think about what you might be able to build with that Spotify API. For instance, while I was using this API, I had this idea pop up. When I'm at a music festival, I often have a hard time deciding which band I should go see, there's so many. Now I would love to have an app suggest to me which of the bands that are currently playing I would most likely enjoy. You know, based on my listening habits, I'm pretty sure that you could build that just with the Spotify API and using a list of events of the bands that are performing. And if you do end up building that, share it with me 'cause I need it. What other interests do you have that provide an API that you can use? Check the notes for more ideas. Now, after you come back from your break, let's dive a little deeper and make use of an API using our own tools, see you soon. No really, take a quick break. Seriously, it'll do you good. No binging. (upbeat music) While I realized that exploring an API on a website is informative, it might not feel like you're actually using that API. I think the next logical step in exploring is actually making that request yourself from your computer, not from a website. Now as I pointed out in the Spotify docs, there were examples that were using a command called Curl. Curl is an open source tool that is used to send data back and forth and it runs locally on your computer and it's awesome for poking around at APIs. What do you say we explore it a bit? Okay, so we are back here on our Spotify page and we see that there is a command here that says Curl. Curl is a command that we can run from our terminal. Now if both of those terms are new to you, command and terminal, this is a great time to head over to the notes and learn about what the terminal is. So my operating system is a Mac and it has an application on it called Terminal. So I'm gonna open that up, Terminal, and in fact, I'm gonna make this a little bit bigger. Let's go ahead, let's let it take up the whole screen, we're gonna be in here for a little bit. So I'm gonna type Clear and clear my window. All right, so this terminal allows me to perform actions on my computer. Like I can make it do text to speech. I can do Say and I can say, "Hi mom." - Hi mom.

• And it says, "Hi mom." And the Windows operating system has a terminal as well. And while it's a little bit different, they're actually pretty quite similar. But check the notes for more on this. So what happens is I write the command and then I pass in values for the parameter. In this case, it's "Hi mom." Now, note that I used quotes there because I wanna pass one value, even though there is a space, if there was a space, that's kinda how you separate things. But with the quotes it's saying this is one value that I'm passing in. We developers spend a lot of time in our terminals, so if this is new to you, I want you to remember that it was new to everyone at one time. So please take your time and don't let this get you too frustrated, you've got this. So I already have Curl installed. I'm gonna just go ahead and make sure that I do by typing the word "curl," and if I see this, I could see that I could type curl and then the command "--help." Now if I didn't have this installed, if this came back with like, I don't know what you're talking about when you type curl, the word curl, that's okay. So we're gonna head over to the notes and you'll get sorted there. But the starting point, where I want you to go is curl.se. So you'll come to this page, you'll see this as a command line tool in library for transferring data since 1998. And that logo sure feels like that, doesn't it? It does all sorts of things. What we're really concerned about is this HTTP, right? We're going to use this from the command line to get access to a URL. So if you don't have curl on your command line, go ahead and pause me and check out the notes for the best way to get this installed on your computer. There's a lot of different ways to do it. If you come here under Download, you'll see that there's different operating systems. So you've got your Linux and you've got your Mac OS. And if you come down here, you've got your Windows. So there's different ways of getting things installed. So go ahead, take your time, get that installed. And when you come back, I want you to try this. I want you to do this thing with me. So I'm gonna go back to my terminal and I'm gonna make sure that it works. The way that I always like to test is I like to go to icanhazdadjoke.com. How do you get a baby alien to sleep? You rocket. Oh, so good. Anyway, that's how you do that. That'll let you go and it's gonna hit that website and it's gonna give you back a joke when you're ready. So now that we've got our curl up and running, we've got our successful dad joke, let's go ahead and run that command from Spotify. So I'm gonna come back over to my Spotify thing where I was running the search. I'm gonna make sure that it's still working actually before I get started, 'cause these tokens can expire and depending how long your break was, it might have expired, but mine is still working. So I got this back here and I should be able to get this from my command line. And what I'm gonna do is I'm going to copy this, I'm gonna highlight this. This is a development practice known by US developers known as copy pasta. So I'm going to copy this and I am going to go back to my terminal and I'm going to paste and this long list of things here, what this is doing is just saying, hey, I wanna make a get request to the api.spotify.com/v1/search. Remember, that's where we were at. We were searching and we're passing the query string of Beyonce and the type of artist and we're telling it, "Hey, I would like to get back JSON and I am sending you JSON," even though we're not actually sending JSON. The default has that there and this is an important one. This is sending you a header, right? The "-H" is a header and authorization. And this is that long token that we had there. Now if all is working, when I press Enter, I should get here locally on my machine that same list of data that we did and I did, check that out. So what I'm gonna do is I'm gonna come back up here and I am going to grab, wow, there's a lot of information here, right? When this comes back, I'm gonna grab her ID. And so I remember that when we were looking at it, it was down in here, this ID, is this the right one? Is that the first one? So we got items, no, this is her ID here, this is her ID. It starts with a six, VW. So I'm gonna copy that and I'm gonna use that. I'm gonna go back and remember I'm gonna go and I'm gonna look, I wanna see what albums she has. So I'm gonna come into here and I'm gonna remember, I'm gonna paste this URL here, and I'm gonna run this, make sure that that's still working. I'd like you to go ahead and pause me. I think I'd like to see can you get her albums locally on your machine? Can you go ahead and make sure that you can do the same Get Artist, see all of Beyonce's albums on your local machine? So here's what we'll do, you give it a try and if you, once you get it printing locally on your machine, you can let me know and then unpause me and I'll show you how I did it, okay? Are you ready? You got this. Pause me. (upbeat music) Cool. So how'd you do? So here's probably one way that you could have done it is just copied that, right? Copy this whole thing and pasted it. But what I wanna show you is that we have access to, we know what these URLs are, right? So we know that there's this v1 artist and in fact, we can see that there is a get of /v1/artist. And then you can actually pass their ID in the URL there, right? That's what this ID is here. So, let's just go back. I'm gonna show you a little trick too. So, I've got her ID copied still, so I could have just, just ran that query and copied the curl and pasted it here. And if you did that, you did it right. I just wanna show you a little bit more of what else, how else we could explore. So I'm gonna press the up arrow and you'll see my cursor's moving here. I'm gonna press the Option key on Mac. I think you're gonna press the Alt key on Windows. You can jump around like this and I'm going to get rid of what's here, and I'm gonna say v1 artists, right? So that's the collection of artists. And I have that specific ID, right? So there's the ID and I'm gonna press Enter here and you'll see that I got back Beyonce, which is awesome. That's what I did and then remember, the artists have, I'm gonna go to the front of the line, it's Control+A on Mac, and I'm gonna switch this so artists have, this is specific artists, so Beyonce, and we wanna see Beyonce's slash albums, which is what the console would've generated for you. But I just wanted to show you that you can kind of navigate and move through and you'll see that there's a bunch of different information that comes through here. It's kind of hard to see, right? So, kind of hard to parse. And this is something optionally that you can do. So I press the up arrow and I'm going to press, pipe that into a tool called JQ and you'll see that it comes back very nice and pretty, right? So this is something that is very nice to have and I piped that. That's this, the symbol above the Enter key is this pipe symbol and it allows you to take whatever happened in this first part of the command and take its results and put it in this part of the command, which is super cool. And again, this is in the notes. You don't need to, you don't need to worry about this, but I know that I can query things. So I can say that of the items, I'm only interested in the name, the .name from each one of the items. And this is a little query language that's attached to this JQ program. You don't need to do this, this is just something, if you're doing it from the command line, it's something that we do that we could kind of hack around with a little bit and you'll see I can get all the lists of her albums and that's pretty cool, right? That's powerful, and if you are gonna just start poking around and moving around with the URLs, one thing I wanted to make sure that you're cautious of is if we come back and we take a look at the console page here, they do a nice trick for you. If we're back here in search, like one of the things that I wanna make sure I know that Beyonce has this song that's like something like, who runs the world, right? Who runs the world? Girls. But I don't remember where, what album it's on. So I'm gonna search for a type track. Now, note that my query has spaces here. Now what's happened here is it's done this URL encoding. So like if you were trying to mess around and work with the search, you'd wanna make sure that whatever you did, you passed that with those plus signs there. So I'm gonna run that curl command and we'll see who runs the world, girls. And I am going to, I see there's this open link here. So I'm gonna go ahead, I'm gonna open that. Let's take a look and make sure this is the right track. I'm pretty sure it is, it is not the right track. What is this? Femme phan? Maybe it's some other, some others. So let's take a look. Well, that's interesting. So, oh, I just went to the bottom instead of going to the top. So I should have went to the very top of these results or I should have pulled, probably pulled the name out. Rock-a-bye, baby. There's a Rock-a-bye baby version of this. Whoop, okay, so when the color stops, hope you're not getting sick of all this scrolling. So Beyonce is the artist that we want. So this is the one, we want to hear this song. Let's see if I got the right one this time. This is just something, you know, there's a lot of data coming back here. It's kind of hard to do, to use on the command line. Sometimes I'm a little cutsy like you just saw. Here we go. Let's see what happens. Let's make sure this is it. There it is. There's Beyonce. Not the song I was looking for. Oh yeah, it is, "Who Runs the World? Girls." And now I can listen to that. So it's like, who runs the world? Girls. It's kinda like who runs the terminal? Curl. Boy, that was a big setup just to make that joke. I hope that you enjoyed it. You can has dad joke. Curl is an awesome way to explore APIs and you'll find that often, just like we saw with Spotify, APIs will use Curl in their docs to show you how they work. Spotify is just one API and there are so many companies and services out there. In fact, some APIs are the product. Like that's what the company's selling to us developers. So now that we've been building up those muscles, why don't we take a swing at another API? Let's use a different API, this time let's use Twilio. Twilio is a company that loves APIs. In fact, that's what the company started as more than a decade ago, just a set of APIs. It started as abstracting away communication channels. And by that I mean any way you'd ever possibly want to communicate with your users. Wanna send a text message? There's an API call for that. Wanna make a phone call? There's an API. Send an email, a WhatsApp message, literally whichever way you want to communicate, there's an API for all of them. Developers embed these APIs into their apps and I'm pretty sure that you've probably used it without even knowing you were. Now, nowadays there's a whole suite of products that Twilio offers that they saw their customers needing. But under the covers it's still these APIs that are powering everything. I need to be a little upfront here with you. I love Twilio, I mean, I love it so much, I even applied for a job with them and I got it. But even if they didn't hire me, I know that I'd still show off how powerful their APIs are. I mean, with a single command, you can send a text message. I remember when I first did that, I was like, whoa. Like that level of abstraction is amazing. I mean if you've never thought about it before, what even is a text message? I mean, I know I have an app on my phone and I can use it to communicate with literally anyone else. But how does that work? Like there's all those different cell carriers and standards and phone numbers. I mean, I have no idea. And with Twilio, I don't need to know. That's the beauty of this API. It just works here, let me show you. All right, so here we are at twilio.com and again, word of warning, this is going to look completely different from my right now to your right now. So please make sure that you check the notes for anything that might have changed and is specifically about this flow that we're about ready to do 'cause we're going to sign up for a trial account. So I'm gonna click the Sign Up button here and this is going to look completely different. I know because our team is constantly making this better. But the one thing that I wanna make sure that you know right now is that you see that there is no credit card required and it is a free Twilio account. So I'm gonna put my information in here and I'm gonna use the same trick that I used before where I do plus and I'm gonna say, "APIcourseV2@gmail.com." So, the plus sign there again, the little Gmail trick, we're gonna go ahead, I'm gonna put in my password again. 1, 2, 3, 4, 5, 6, my luggage. How many times can I do that joke? And then I gonna do this accept, must be 16 or more characters. Okay, there's some password requirements over there. I think that's 16. All right, here we go. Starting my free trial. I'm ready. Let's do this. I'm definitely gonna save that long password 'cause I need that for later. All right, so I have now should have been sent an email. So let me make sure that I got that email and I did, I am going to click the link to verify it and here we go. I'm gonna verify my phone number to verify I'm a human 'cause all humans have phones. So we're gonna do (432)-527-4274. Please don't call too late. I'm gonna try that. I'm gonna click Verify. All right, so I got my verification code. Hey that came very quickly. Well that's wonderful, my verification code is 017869. Hopefully your code's different than that. Wouldn't they be funny if they were all the same? All right, so here we go. So which product are we here to use? We're gonna use SMS. We're gonna use the SMS messaging product and what do we plan to build? Let's see the, of course, these questions are gonna be different. What are we gonna do? We're gonna build, what? Build something else. We're gonna build something else, how do we wanna build with Twilio, with code, right? So we are gonna end up writing code if we want to with minimal code on top of code samples or no code at all. So, definitely don't need code to build over here but I'm gonna say with code 'cause we're developers here. So what is your preferred coding language? We're gonna do JavaScript even if it's not, we're gonna be doing JavaScript for the rest of this course and I do want to host my code on Twilio, which is nice. There's a nice serverless option. These options, like I said are totally going to change. Just try to answer them as truthfully as you can. So, and my building country is United States, which is true. And I'm gonna get started. I'm gonna go ahead and walk this. I guess let's go ahead and so we'll I can explore products. There's way more products that are available than you can see here. This is what got built based on the menu of what they thought, but if I ever want to, I can come to this Explore Products and get more, we probably won't need to do that 'cause we filled out what we're gonna do. And this is where you can get access to your logs. I'll show that off here in a bit. If there's any problems you'll be able to find them there. Manage your account keys and build trust with your customers. Yeah, we can build all sorts of different things in here. We probably won't need to do too much here 'cause most of the keys that we have are available to us right from this page that we're on actually. So we'll keep going and I can see the billing and again, you're in a trial account and I think you get something like $15 to try with. So we'll be sending a text messages using that trial. Dollar dollar bills, y'all. So, here we go. And then you can switch between products. So you can have multiple accounts, right? So if you wanted to come and like explore a little bit, do your own personal thing, maybe do something for work later, up to you. There's a 1550 is what we got. All right. So, and then I'll click Next and then I can, anytime I want to, I can look at this tour again to help navigate around, which is really nice, beautiful console. So we could definitely go ahead and the first thing that we wanna do is we want to get a Twilio phone number. So I'm gonna do that. I'm gonna click this, Get Twilio Phone Number. And I am so glad that this happened to me. It says that this account has been restricted from provisioning new phone numbers, which means that thinks that I might be spam. And you know why it is, it's because I put that Gmail account with a little plus thing there. So if this happens to you, I don't want you to feel offended or anything like that. I want you to check the notes for the latest ways to get around this. And also I'm going to go right now and I'm going to email compliancereview@twilio.com and I should get that up and running. If this happens to you, go ahead, press Pause, check the notes here for what to do. And I'm going to actually do that. I'm gonna press Pause here. I'm gonna get my account able to get a phone number and I will see you back here in one second. All right, so I got all sorted out. So I sent my email to the compliance folks and I was able to say that I was doing a personal account and I'm learning how to use these APIs and they were able to let me get in here. So what I'm gonna do now is when I click this Get a Twilio Phone Number, we're not going to see that message 'cause I'm coming in and I've got a new phone number and it automatically gave me this one, this one here, this 561. It went away really quick, but it's down here. This is my Twilio phone number, this (561) 816-5433. Now this number is mine, which is awesome. I can use this message, I can send messages, I can receive messages, I can do all sorts of things with this. I can make calls, I can receive calls. This Twilio phone number is mine to play with. I think we should do just that. We should send a text message. Now before we get started, I wanna make sure that you know this stuff, you are on a trial account. So there are some limitations. You can only send messages and make calls to verified phone numbers. So when we set things up, we've verified, like I'm able to send a text to myself because I verified my phone number. I mean, and it will say, "Sent from my Twilio account," beforehand. And there's more things about your trial account too if you wanted it to get into that. So, check the notes because this very well could have changed, but check the notes for more on this. So let's do it. Let's send a short message service, an SMS. So I'm gonna click here on this Docs and Support and I'm gonna click this, it's gonna open up, I'm gonna go these developer docs, these developer docs are some of the best that are available out there. I want you to see these. So we're gonna come in here under SMS 'cause that's what we're doing, right? Short message service, and under here, under these, these sides on the docs here, you can collapse these. So I'm gonna come in here under API reference. I'm gonna go to this message resource. Now this is an API, right? So we're in the API reference. So the API that we want to do is we wanna be able to send from, and we wanna say from the phone number that we just got and we wanna send a message to my phone number, right? So we're gonna do that and you'll see that over here on the right, there are things that you can do that show you what you can do. So with this message we can do all these different things. We'll start with creative message, we'll create a message first. So we're gonna go into this, create a message and there's these different languages here. So we have no JS and you can see the style that it looks like, we'll take a look at something like this here real shortly. This is a helper library that wraps around the API. So you don't need to do the sorts of things that we're about ready to have to do. You can do things a little bit more cleanly. But what we're gonna look at is Curl, right? So here's our friend, Curl. We're gonna jump over here to Curl and the docs have this really nice thing where I'm able to actually copy this. So I'm gonna click to copy this and I'm gonna pop over to my terminal. Now again, I'm running on a Mac. So there's a couple of things here that this is assuming that it's going to be okay because I am running on a Mac. It's going to assume that these slashes, see these slashes at the end here, these on a Mac terminal, these show that we are in the new, we're making a new line available here. And also you'll see that there's these account SIDs and these Auth tokens. This dollar sign Twilio Auth token, dollar sign, Twilio Account SID, in my terminal, on my Mac, that is what's known as an environment variable and they've been set. Now I don't have those set currently because I just built this account. So what I'm gonna do is kind of bad practice actually, I'm gonna actually put my real information here for us to use. So, back here on our console, on our Twilio console you'll see that I have this thing here called this account SID or String Identifier. So this is my ID, my unique ID for the account that I just created. So I'm gonna go ahead and I'm gonna click this Copy button. So I copied that, I'm gonna come back here and I'm gonna move my mouse and I'm gonna remove right here where it says account SID. So that's string identifier. I'm going to paste this. So that is the way that Twilio is identifying who I am. I'm gonna go backwards through the rest of these. And so if you're watching here on Windows, let's just go ahead, let's get rid of these, these new lines here. So I'm gonna just put them all on one line, we can handle that, we'll do that. So I'm gonna get rid of that line and that way it will work completely on both Windows and Mac for what we're trying to do. So I still have my account SID here, so I'm gonna keep on backing up here and I'm going to get rid of that line, there we go. And you'll see one more time here, there's the Twilio account SID, that string identifier for my account was still present. So I'm gonna paste that there. So now the API call that I'm doing is to that specific account, it's due to this messages and you'll note that it's doing, now it's doing a post. So because we're creating something new, right? So we're using post to create a message and you'll see here that it says from equals and the number actually there for the from, we want that to be the Twilio number that we just got, right? So that new one that we just got, we're gonna say that is sent from, let me go back, I'm gonna copy my Twilio phone number, right? So I've got my 561 number there and I'm gonna paste that here. So you know from and this plus 561, that's a US number. So it's got the, it's called a 10 digit long code, 10 DLC. So it's (561)-816-5433 is the number that I just bought. And we're gonna say by default it said, "Hi there," the body of the message, right? So we're, instead of that, whatever we're gonna do and note that this is all in quotes and we're gonna say, "Ahoy world." I don't know if you know this or not, but the first word, the way that we used to answer the phone was we'd say the phone would ring and you'd be like, "Ahoy?" And the other side would go, "Ahoy-hoy." So we like to do that here a lot, at Twilio we say "Ahoy world." It's kinda like the hello world of this. So the body of the message, the text that we're going to get is gonna say "Ahoy world" and then we're gonna send it, I'm gonna send it to my phone number. So this is one of those numbers that you verified right when you created your account, you verified that you had a number. So my phone number is (432)-527-4274. Don't text too late at night please, and then the final thing that we have here is this Auth token. Now this is a very private key, right? We don't ever want anybody to have access. This is like that Spotify token that we had, right? We don't ever want anybody to have it. I am going to, I trust you and I'm gonna go ahead and I'm gonna paste that here so that we have it. So that is something that you never wanna let out 'cause now you could seeing this on my screen, you could use this, right? And you probably don't want anybody doing that. So you never wanna actually give that number out. You wanna hide that and we'll talk about how to do that more here in the future. But right now I just wanted to show you, we're gonna use Curl, we are going to create, we're gonna send a post to this URL here and you'll notice that ends in JSON. So that's what we're gonna get back. That's the way that it works. This is to my account, my account SID, you see it starts with this AC and we're gonna post using this data URL encode. So the way that the Twilio API works is it takes some parameters, it takes from body and to and the way that you pass those in curl is with this --data URL encode and you pass what it is that you want to have go across here. So we're gonna, if all of this works, I should get a message back. I should get a text message on my actual phone that says "Ahoy world." Let's do it, and it looks like I'm missing a quote someplace. So where is the quote that I'm missing? I don't see a missing quote. I can go press the up arrow, maybe it will show up. Yeah. Oh, right. You know how many times I do that? The ahoy world, the exclamation point is something that you need to typically escape. So I'm just gonna say "Ahoy world" with a single quote there. So, if you're having that problem, sorry, that's what that was. So I pressed the up arrow to get my information back there and now if all is going well and I press Send, we should get a text, here we go. And so I got this message back, I got this and sure enough, here it is, I got it. And you can see here it says at the front of the body that it says it says, "Sent from your Twilio trial account," which is fine, we're in a trial account, that's totally fine, but I did and boom, I got it on my actual phone, I got that message, which is awesome. We now have the ability to send a text message from the command line, right? That's pretty cool. Let's take this a step farther actually. So we know that that API, when I did a post, I was able to get information back. I'm gonna go ahead now and I'm gonna do just bring that back and I'm gonna get rid of all of these parameters here. I'm gonna get rid of the from, the body, and the to and I'm gonna change, I'm gonna make that, I'm gonna do a get and let me show you what that looks like. So I'm gonna get rid of all of those parameters, I'm gonna keep that same URL and it still has my account SID there, right in there and instead of a post, what we're gonna do is we're gonna do a get, what we should do is we should get back all of the messages that are there. So I'm gonna hit this kinda like a message log, right? So these are all the messages that have been sent, which is awesome, here it is, sent from your Twilio trial account. So, and actually I can make this look a little bit prettier like we saw with JQ again, totally optional in the notes if you want it. Yeah, there we go. So you can see that I've got some information that's sent back here and you can see that the message that was sent in was sent outbound to my phone number to me from that number, which is awesome, right? And like I said, curl's a little bit challenging because it's gonna be a little bit different if you're in Microsoft Windows or if you're in Mac. I tried to make that as comfortable as possible but I you saw that I did run into a couple of things like I couldn't use the exclamation point and things like that and it's a little clumsy. So stay tuned 'cause there are more tools coming your way. Awesome job getting that running from your local machine. It feels pretty good doesn't it? What a cool skill you have now, you can send a text message from your machine with just a single command. Now believe me, this is just the tip of the iceberg of what you can do. There are so many more Twilio APIs available and now I know that you can explore them with Curl. For now though, let's take things another step deeper. Now I don't know about you but I'm a little clumsy when it comes to long commands on the terminal like we just did with Curl. When exploring APIs, I really like to lean on visual tools. If you don't mind, I'd love to show you some, that is, of course, right after you take a quick break. (upbeat music) There are a few tools that I rely upon when it's time for me to explore new APIs and I thought I'd share 'em with you. I used these to dive in and get my hands dirty and organize my learnings. One of the most famous tools and one that you've probably already heard of is called "Postman." Do you get it? Postman. In addition to being a pretty good pun, it's also a powerhouse of features. Postman started as a Chrome extension that let you make API calls and what it's turned into is a powerful enterprise ready tool with all sorts of bells and whistles and even shareable collections for the most popular APIs that are out there. It's jam-packed full of features and in my humble opinion, you probably don't need all that just yet in your learning journey. There are entire courses on how to properly wield its power and I've linked to a few of those in the notes. There are other tools popping up all the time that allow you to explore APIs and store your notes. I like to think of these apps as the built in the vein of postman. There's a whole genre of video games that gets dubbed Metroidvania, because they're similar to "Metroid" and "Castlevania." Now these apps are Postmanvania, Postman-esque. Let me show you an example. I just bought this lamp here, it's rad, it's from Govee and it's got this app that I can use to control it on my phone. I can change the colors, right, and I can even make it dance to my beatbox. (Craig beatboxing) It also has an API. These are the docs here and as I explore these docs, I'm gonna save them in one of these postman esque tools that I've been using lately called REST Fox. Like here I can see all of the devices that are associated with my Govee account. And I set that up using this URL here and you'll see that it is a get request and I pressed Send and it sent the request and I got back the Govee devices that are associated with my account. This API requires a header and it's called Govee API key. And you'll see these double mustaches here that I'm using, this side little mustache thing. This is getting things from my environment, it's a special key that I don't want anybody to see. I'll show you more of those here in a bit. Now notice how this is a get, so I can send the request and you'll see that here's my response and I can also get the current state. So I have a different call here. I can get the current state end note that if I click Send here we can see that this is the color of my light currently and I can also turn it on or turn it off and I can turn it on and I can also change the color, right? So I'm gonna turn this to red. You don't have to turn the red light on, Roxanne. Pretty cool, right? And I have this here for me whenever I want to tweak things, when I want to come back later and when I want to use it in my code. Did you just have a light bulb moment? I quite literally just did. Let's see if we can't build one of these for the Twilio APIs. So if you'd like to get REST Fox installed, please check the notes. This is an open source tool and it's getting better every day. Now if you love it too, I highly suggest that you star it. If you click up here, you could go and you can actually check out the GitHub repo and you could see cute little Fox here and you'll see over here how it's tagged that, oh it's tagged REST client. I guess maybe that's a little bit better than my Metroidvania analogy. Maybe REST client's a good thing. API client, that's also a good thing. So there's lots of these tools that are available. But let's start using this one. So I've got REST Fox running here and you'll see I've got the Govee folder, which I can collapse. And typically what I do is group these by the API that I'm exploring. So let's keep poking around a little bit with Twilio. So what I'll do is I'll make a new folder called Twilio. So I'm gonna right click over here and make a new folder called Twilio. And now in here we'll create a new request. So I right clicked New Request and I'd love to explore more of the SMS API. So let's see, oh you know what? This new number that we just bought, this Twilio number that we bought, not only can it send messages, but it can also receive them. So we could send it a message. So let's do that. So let's go ahead and send a text to your number. Now if you forgot your number, it's over in your console. So if you come to your console and you scroll down a little bit here, you'll see My Twilio Number. So go ahead and send a text to your number. Now my number, I'm gonna send a number. It's (561)-816-5433. I'm gonna send it, "Yo." And there we go, it went and I ended up getting a default message back and we could change this, we could make, we could program this to do whatever, but I'll show that off later, but for now, I just want you to know that we created a new message by sending to this API and we can actually get it. And you can also find your phone number later here under this phone numbers. If you go to Phone Numbers, Manage Active Numbers, you can see your phone number and remember outside of trial mode you could buy multiple numbers. So that's an important thing to know here. So, all right, so we are going to look at the incoming messages. So we should do that, we should call the request what it's going to be. We'll call this incoming message log. That sounds good. And we'll click Create. Okay, so let's head over to the docs and see how we might do this with, so back in the docs here on the message resource, remember this is where we did the create a message. I'm gonna see if there's something else down in here. Ah, list all messages. That's a good one. But we don't want all of the messages, we actually want to filter it a little bit. So look here, we can do this by matching filter criteria. That's great. So we're in here, I'm under the curl tab, right? I could be in these different ones, but this is the example that we want here. I'm gonna grab this URL, you're gonna see all of this. So that's how they're filtering it. There's some stuff here at the end. I'm gonna grab all of this and I'm gonna copy it. I'm gonna come back over and I am going to paste it here in this Enter Request URL. I'm gonna paste the whole thing there. And it was a get request and the URL had some stuff in this query string that came afterwards. And a query string is, you know, defined by this question mark. So we don't want this date sent, let's get rid of this. And what's next? We don't want from, right, we don't. We wanna look at all the numbers that were was sent to, right? So this is the to here, is what we want. Now this 2B here just happens to be a percent 2B URL encode and happens to be a plus. And I know that and I just happen to know that without having to Google it but that's a little rough to know like how do I make a plus sign in here? Wouldn't it be nice if this tool just did all of this URL encoding for us? Like we didn't need to make this mess at the end? Well check this out. Here's query right here. This is what we want. So we wanna add this query. We don't want to have this whole stuff at the end here. We wanna put in to, we're gonna add one of those things there. We'll put in a to. So that's gonna append that query string for me. And I'm gonna put in, to my phone number, which again my Twilio phone number, which is over here in my logs right here. Actually I can, I'm gonna grab this number. This is my Twilio number. I'm gonna put it in the format that is wanted there in my REST Fox, here we go. So I'm gonna fix that and we're gonna get rid of this. Just wanna make sure that's 1561, there we go. Got rid of all those. All right. Now also remember that this was accounts and then it had account SID, right? So that's the ID for my account. And then it's under messages. There's a collection called Messages underneath this account SID. But what we want here is we want, that was using an environment variable from Curl, but this is also known as a path variable, right? A path parameter, so here, down here we have this path parameters. So the way that these work actually to replace them is if we go like this, if I get rid of this and I put a colon, what's gonna happen is we can, anything that's down here in this path parameter will replace what's here. So let's do that. Let's add this item. And again, that is Twilio account SID. So that's the name of the variable that's up here, right? It's colon, Twilio account SID, that was just what's there. Let's keep it 'cause that's what it is. And then we're gonna put our account SID there. So that also is on my console. So I'm gonna flip back to my console. And on the main page here, if you come in, you can come down and you can grab your account SID. So now I have my account SID, and I'm gonna paste that there. Awesome, and I think we're ready. I'm gonna press Send an, oh, we got an error. We got a 401 unauthorized, no credentials provided. Oh that's right. Of course, we want to log in. We don't want anyone just being able to see these messages. So we wanna make sure that we have some authentication happening. So I'm gonna head over to the Auth tab. You'll see that if I slide this back and forth, I don't know how much screen real estate you have, but you can slide these kind of around as need be. So I can, I'm gonna pull this and you'll see that when I do my little menu here collapses. So I'm gonna choose Auth from here, but that is also available in the header here, right? So like it's just a different view of it. All right, so in the Auth I'm gonna put in a basic Auth and I'm gonna put in a username, which is my username and then I'm also going to put in my password, which is my Auth token over here. And again, this is very private and you would never ever want to do this. You now know my Auth token. I don't want you to have that because you could do exactly anything you wanted to to my account now that we're there, and one of the things that you could do is see the messages that were sent in and look, there's my "Yo," my "Yo" message has made it in, awesome. So also I wanted to show you the request that happened. Let's take a look at that. You can see that what actually happened was it was a get that was sent with the account SID, right? And so that was the account SID that we used from, if we look back at the query parameters here, the account SID showed up there and then it automatically did a two URL encoded and if you look it put the question mark in for us and it did that percent 2B for us automatically URL encoded, very nice, right? And we can see the headers that were sent and we can also take a look. Let's look again at this preview. So we see that we had, the response came back and this is JSON, right? So we have a key called messages. And this messages has this, it starts out, there can be multiple messages here, right? So this is the start of what's known as a list or an array and then there's an object. And the start of the object is always done with one of these mustaches, and we call those mustaches 'cause if you kind of turn your head sideways, it looks like a mustache. So all between the opening mustache and the closing mustache is the information about the messages, right? So here's the, and there's the closing bit of my list. There's only one. This is the closing mustache there. And so part of the message that we can see, we can see who it was to, that's my Twilio phone number here. And we could see the from, there's my phone number there, please don't call too late, but that's my phone number. And I did say, I said "Yo" to it, which is awesome. So now we have this. Now this step is completely optional. This is something that I like to do is I like to take notes. All right, so there's this incoming message log. I like to keep notes and I put those in the description over here. And so let's see this returns all incoming. Well, let's be a little bit more, all messages sent to this phone number, right? And one of the things that I like to do is I like to put on the docs here. So if I ever come back and I want to find how was it that I learned how to do that, I can go and look and put a link there. So I'm gonna go flip back over to the docs real quick. And this is read a message with matching a filter. I'm gonna copy this link, I'm gonna grab this or click this here so that then it changed the URL up here. I'm gonna copy this and this is what I'm gonna store in my notes. Again, this is totally optional and this is just notes for you for later 'cause you could end up having a whole bunch of these and you might not remember how you found how to do that. If there's something specific or strange about the API that she wanted to know, I keep the notes in there and it's a just a handy learning tool and again, totally optional. So we've got our first entry all set and I think we should add another one. Why don't we create the send message one, right? So the one that we did before we sent messages, let's do that. So I'm just gonna duplicate this 'cause it's got a bunch of the information that I already need in it. So I'm gonna duplicate it and what I'm going to do here is I'm gonna duplicate and I'm gonna say "Send message," right? So when we sent a message before, remember it wasn't a get, it's a post. So I'm gonna change, I'm gonna change that from a get to a post. So now we've got this send message that's a post and the query string. I don't want to send a query string anymore, right? So remember wait, before when we did this, we sent it to using the data URL encode. In fact let's go, let's pop back over there and look at what it was that we did. So in the documentation over here we have this create a message resource. So, on the message resource page here, we can look and we can go to this create a message resource and there's some information about it. So you send this http post and you can see that again we were, remember before we were doing this data URL encode and we were doing this URL encoded. So it's this form encoding is what's happening here. And oh look, well a couple things actually there's a nice warning here. This says if you wanna send messages while in trial mode you must verify your two numbers. So if you wanted to send to somebody else, you could put them in this verified caller IDs if you wanted to, you could send to somebody else as well. Just there. That's how you do that. If you wanted to test or show somebody what you're building, that's how you do that. After of course, after you're not in trial mode, you could submit to whoever you would like to. So when we are creating a message, we must include the to, right? We need that and we need the from. So we'll do either and we'll do body and there's this media URL which means I can send a picture. Let's do that. Let's make it so that it sends a picture. Now when I am in REST Fox over here, I don't want to use the query anymore, I'm gonna keep the path 'cause the path is the same, right? So we're gonna do, we're gonna do a post to that same URL, Twilio account slash account SID messages dot JSON and we're gonna make a post to it instead of making a list and retrieving, we're going to create. So we're gonna go under body and for the body we're gonna make it form URL encoded. And what we wanna do there is we wanna send it to, so I'm gonna send this to my number. Again, don't call too late, (432) 527-4274. No really, if you wanna call and get feedback, that's fine, I'd love to chat. So we'll do from, and that is my number again, this is my number and which was that number. So we can come here into the message log. We can go pull that number from the query string. So this is my Twilio number there. From is this value there and we are going to add the body, the body will say sent from REST Fox and let's add our media URL. And I just happen to have one of my favorite photos, which you will have to check out for yourself to know what it is. But it is a photo that I pick, if you will, that I'm going to send to myself. It's also in the notes if you want to do this as well, if you wanna copy that and paste that. So here we go. I am going to do a send. Now remember I'm also authenticated with my username and password 'cause that copied across when I did it. So I'm gonna do a to, from, a body and a media URL. So now I'm gonna go ahead and click Send and boom, we got our message back, right? So the response, we got a 201 created, right? So it was created in the body, we can see the body of our message. The key is sent from REST Fox, it's got some information. We can go ahead and get access to that message if we wanted to and it's got these actual media resources down here, which we can also take a look at. And we could, if we wanted to open up a whole 'nother one of these and explore and see what that looked like. But let's take a look at that in a new tool. Before we do go to look at that new tool, one thing that I don't love about what we just did are in my, in these requests, in these separate requests, these are duplicated, right? I've got this username and password. If I go to my post send message, I've got this username and password and they're duplicated there, which isn't great, right? That's not excellent. One of the things and one of the tools that most of these REST clients provide is a thing called an environment. And let's set that up really quick, real quick for this. So if I come here under this environment, here is my default collection and I can add a new environment, I'm gonna add one for Twilio. Now the way that these work are, they are JSON based. So this is, remember this is the start of an object. Now if you've never written JSON before, take your time, use some patience. One of the things that you could do is you could come in and you can put in account Twilio account SID, and you do the key and then you do a colon and you can see that I'm, this is unexpected JSON down here, it's helping me out. And now I'm gonna put in my account SID and again, let me go copy that one more time and I don't have to copy this anymore 'cause it will be part of my environment. It will be here with me, which is really nice. So come over here, I'm gonna paste that and now I want to add a new key. So the way JSON works is you put a comma after that, right? And I'm gonna put a new, the new key here and we'll do a Twilio account or Auth token. And again, this is, that can be, that key can be whatever you want it to be and we'll be able to reference it. So I'm gonna come and grab my Auth token and I'm going to change this, right? So that's a great use case of this is I don't want you to be able to, I am going to change this, right? So as soon as this, as soon as I'm done recording this, I'm gonna change my Auth token and that would mean that I'd have to go change each one of 'em. But now I have one place where it's defined. I have one place in my environment that's defined. So I have this environment here that says Twilio. Now instead of username I can do this mustache, mustache. And I can say Twilio account SID and that's the way the templating language works here. And then most of these REST clients and you can do Twilio token. So when you see that's what's happening. That is the environment, it's using the environment variables. I'm gonna go do that for here. And also I'm gonna copy my Auth token for here. And so now I only need to change that in one place in my environment and you can also use it here. So like not like before I can, I can also put my account SID here. So that will also make this so that it's shareable, right? So if I don't specify my information in here, I can share it. So you what you could do, and actually why don't you try to do it, why don't you try to add your Twilio phone number and see if you can figure out how to add to your JSON there, your Twilio phone number and then you could replace it, right? You could replace it here with your from, from your Twilio phone number, pretty neat, right? So that's a good, little trick that you could do in here. You could do your Twilio phone number, you could use it there too. So anything that you're using is something that you can kind of store there in your environment. And what's nice about that, let's make sure that it still works. Yep, it's still working. And let's make sure, make sure my, oh, I'm not gonna send another picture to myself, that's fine. So we know that this environment is now working and it's here and I don't need to go back and get those every single time, really handy. And what's nice is you can do these imports and exports and we'll take a look at that here in a bit. So when we get back we're gonna take a look in a different tool 'cause this is REST Fox and I know that you're probably getting ready for a rest. So let's take a quick break and then let's see if we can't retrieve that pic that I sent myself via this API. But let's do that in another Postman mania or REST client, right after a quick break, that is. (upbeat music) All right, quick refresher. We had just sent a message from REST Fox, a REST API client. Here's the body of the message we just sent from REST Fox and we actually sent across some media with it. You can see here it has this Num Media one 'cause each text message can have multiple medias attached. And if you scroll down here, you'll can see that there is this key of sub resource URIs and it has a list of an object here and one of the objects is for media. And what this will do is this will allow whatever's at this URL will give us the accounts for this account, for this message specifically, it'll give us all of the media that is listed. Now, typically when I have something that's this far out, we could actually add another one here. But I thought I'd show you a little bit of how my process normally looks in case we wanted to see what that felt like. So I use an editor called Visual Studio Code. It's free, it's available and this is where I do my coding from. So I start here, I start working on my coding. I would love for you to go ahead and download this because I wanna show you a tool that's inside here that will allow us to do a REST client as well. So go ahead and pause me, get Visual Studio Code installed and when you do come back and I'll show you something. (upbeat music) Okay, so once you get Visual Studio Code up and running, if you press Command+Shift+P, there is a thing called extensions. And this will do a little, if you type in Install Extensions, you can come here and you can see different things that are available. What I want you to install is a thing called Thunder. We're gonna do install a thing called Thunder Client. And it's this one here, it's a lightweight REST API client for a VS code. It's really powerful and the good news is, is it is Postman-esque. You are gonna feel very familiar when you take a look at this. So if you do it, you can go ahead and click Install. And what will happen is there'll be a little Thunder Client that will install over here like so. And just like you've seen before, there are these, this concept of collections and we can make a new one. So I'll make a new collection for Twilio and typically what I'm doing is I'm coding and I run into this API and I'm like, ooh, I wonder what this is. I'm gonna go explore it a little bit and I'll explore it right from my editor, right? So I'll write my code here and then I can come over here and just take a look at what was there. And so let's go back to REST Fox and I'm gonna grab that REST Fox that we had here, right? So we're gonna do that. I'm gonna grab that and I'm gonna come back over here to Twilio, I'm gonna make a new request. I get to name it. And this was the media check. Let's no, we're gonna do all media. All media for a specific message, right? So here we go, I'm gonna paste that URL in here and of course it's missing that first part, which was api.twilio.com. So again, this is the going for that account to those messages. I'm gonna look here at where it says Auth. So it says inherent authentication values from parent. This is a very nice thing and this is something that Postman has too that REST Fox doesn't necessarily have. We put this in our own environment, it's kind of similar, but you can make, for this collection that we built, we can actually do the settings for the collection. And if I come in here, I can set the Auth up here so I could do this basic Auth here and go grab my stuff. And so just a reminder in REST Fox, when we did that before we were in the environment of Twilio and I was able to grab the Twilio account SID, right? So let's go back to our code here and the Twilio account SID is the username and the password. Let's go back to that environment in REST Fox. The password is that Auth. There we go, we'll paste that there. Perfect. So I'm gonna click Save on this. And so now this all media should work. So I'm gonna go ahead, I'm gonna do a send to this and there we go, we got it back. And we can see there's a media list is the key here. And again, it's an array of those and this is the list of all of the media that's available. And so now look at this collection. So we have a collection of accounts and here's a specific account. We have a collection, that account has messages. That message has media and that media has an entry, a media entry, and that's it. This is what we're looking at right here. So something that's pretty cool. The way that this works is if I get this, I can get some metadata information about it. But if I get just a little bit of it, if I just go ahead and take this the way that, the way that Twilio works, and not all APIs do this, but if I do this without the extension here, I'll actually get back the picture that I sent. So I'm gonna do that, I'm gonna make a new little request here. So a new request, and we're gonna call this, get the pic, right? We're gonna get that pic that I sent 'cause we don't, still don't know what that pic was. What was it? Let's go take a look. So, again, at the end of this, oops, sorry. At the end of this, there is no extension, right? So I got rid of the dot JSON extension and I'm gonna put it the front here, HTTPS api.twilio.com. And the interesting thing about this is this pic is not authenticated and if you do authenticate, you end up actually having some problems. So I'm gonna tell this request specifically to not inherit value. So I'm gonna disable this so that it's not authenticated. So when I click this, if all goes well, we should see the pic that I submitted, awesome, and we do, cool. So it's a little big, it's a little big of a pic that was sent here. And we could take a look at some stuff here. We could look at the headers that were sent. So we can see a couple things. One of the things that I think is really interesting is when it says last modified, so the last modified date, if you have a request that has this on it, it means that you can use caching. So you can, when you make the request, you can actually say, if it's been modified since this time, do that. So I'm gonna do that, I'm gonna grab this. Let's just take a look and see what that does. So I'm gonna go to headers here and I'm gonna put a new header in here of if, and you can see that there's auto complete. So it's if modified since. So again, this is the request that I am making, I'm making this request and I'm gonna say if it's been modified since then, give me and otherwise let me know. And so the way that it lets you know is 304 not modified. So that's a status and you'll see that I got zero bytes back. So that is how caching works and what you can do to send this across. So, this is really powerful, right? I didn't need to set up all the other things. And it's kind of really a quick little look at this. I don't actually even need to do a collection. I can just do a new request outside of it and I kind of explore through and see how these things are working. Which ding, ding, ding, means we covered another part of a RESTful API constraint scavenger hunt. Using standard HTTP caching mechanisms like last modified and e-tags, a RESTful API should support caching. It's up to you to maintain the cache on your client and decorate requests, but this can come in really handy to avoid making unneeded requests. And those are the Postman-esque things I wanted you to see. I wanted you to be able to do that without diving in necessarily to do all of the Postman enterprise things that you wanna do, but I think it's time. I think you should feel comfortable enough that we can now look at Postman and see what we've already learned there. So I'm gonna go here and I'm gonna just do a quick, quick little Google search for Postman. And this is really nice. You can do this for whatever API you're working at with. And since we're working with Twilio, I'm gonna search for the Postman Twilio collection. So there's some docs on Twilio about it, but if you look here, there's this Twilio Postman on the API network. So this is important to know, there's a lot of things on this API network where they've built APIs for you to go and share. So I'm gonna click this and now note I'm inside of a web browser. Postman's done a really gorgeous job of letting you run inside of your browser. You also can run it locally like we did with REST Fox, but I'm gonna run this from my browser. So I'm gonna go into this messaging SMS and you can see there's all sorts of different things in here. It's a little bit hard to get to here, but you could change things. Put in your account SID, and all sorts of things. Like we saw, look, here's the double mustaches, right? And here's a thing to send an SMS and it's super cool. It's neat, right? And so you've seen this. Here's your authorization, the headers, the body, there's collections. And what's cool is somebody's already built these collections for you and they're sharing your stuff this way, right? So that's kind of nice. So there again, there's path variables, right? And the path variables coming up here. There's the call and account SID that you saw from before, here, somebody's using this as the start, the https API twilio.com and it's doing a post, right? So it feels very similar. So you're familiar with this. There's also a bunch of other things over here that it can do that could get a little bit distracting. And that's what I was trying to kind of avoid 'cause I wanted you to get familiar with it. But know that this exists. One of the really cool things that Postman does is if you click over here on this far right over here, there's this little code, it's like open and closed tag. This is really neat. So we have Curl, right? So we could see, this is how I would go ahead and do this and this, this feels familiar, right? This is how what we actually did, we did this curl statement, but check this out. You can do this in any programming language. So the trick here, the trick to remember is that any programming language that can make an HTTP request, like it has a client built into it, because these are all standard, the REST API, right? We're following these constraints that have been defined, it can generate code for you. So here's node JS using a package called Axios. So Axios allows you to fetch things. So this is what it would look like if you tried to write that using Axios. And if you look in here, you come down here, here it is in PHP with Guzzle, I don't know what guzzle is. I like that though, that's why I chose it. So you could see that it's generating this code for you. And if I copy this and pasted it into my PHP code or my Python code or my Java code, it would just work and that's really handy that is if the company that's providing the API doesn't have a helper library or an SDK, a software development kit, which we haven't looked at yet, but we're about ready to, Twilio does have one of those but if you were looking at one of these that didn't, this is a great way to get that code. So again, check out the API network, this Postman API network, it's cool. I think you're ready now to use this if you want to. But also feel free to use the other tools, explore the APIs in a comfortable way, wherever you might be most comfortable with 'cause there's all sorts of really fancy tools here on Postman and like I said, there are courses on how to take full use of all of the things that are available. Awesome job diving into all those tools, Postman is a super powerful tool and it keeps getting better every day. There are so many features that we didn't cover. We barely even scratched the surface. There's an entire course out there on it. Check the notes for a way to see that. We saw how to organize our request together into collections as well as share common and secure values by using variables. We learned how to add different values to request both informed values, query strings and headers. And we also saw how to navigate through various sub resources via clicking URLs. We even saw how to create actual runnable code from your request, while we were in the Twilio documentation, you might have noticed the code examples on the screen on that page. It's possible the tab between various language implementations and solutions. Many products offer what is known as an SDK or software development kit or helper library that allows you to interact with their product in your native language. As you can see, it abstracts away the REST API completely. Let's take a look at the Twilio helper library next. Before that though, just a quick reminder to make sure that you check the notes on this video. There's a link to a repository of built out collections that are ready for you to use. There are lots of great APIs to practice with. All the tools that we just looked at are great for accessing and exploring APIs. However, when it comes time you're most likely gonna wanna write some code. Now as we saw in Postman, you can actually generate code. All programming languages have some sort of way of making HTTP requests and as you know, HTTP requests are all we really need to interact with REST APIs. So writing that sort of code is totally fine, but you'll find that you'll end up writing a lot of what is known as boiler plate code. By boiler plate I mean code that is repetitive and almost always the same, just with a few tweaks. Many products and services have created a solution to help you avoid this problem. They're often called helper libraries or SDKs, software development kits. They'll be specific to your programming language. These libraries help make your code more concise and legible. They usually also provide additional documentation for your editor, which I find super handy. Let's go check out some of these helper libraries. Okay, so let's take a look at one of these helper libraries. Let's take a look at the first one that's here. So again, I'm in the docs SMS, create a message resource. I'm here under the curl tab currently, remember, when we did this, we went and we saw how to do this. We passed the from, the body, and the to, we passed in these environment variables as what this dollar is. And this dollar Twilio Auth token, their environment variables and it's also used here in the URL. So we had done that, we had done that with Curl. Now one of the really nice things about these helper libraries is they look very similar, but it's taken away this whole notion. So let's go here. I'm gonna go to this node JS. Now, quick word of warning, if JavaScript is new to you, there is some stuff here that might be a little confusing. And I want this to just kind of wash over you. I want you to more feel what it feels like as I explain it and don't be too concerned with not exactly understanding all of the things that can happen, especially if you're one of the folks who has the Hello World requirement. Please don't feel like you need to fully understand all this. I will walk through this code line by line and tell you what it's doing and it will be familiar to what we've been doing just in a programming language that you might not yet be familiar with. So I'll take my time and you take your time, give yourself some patience. In fact, I'd like to suggest that if you are in the boat where you have not written code like this before that you watch me first and then come back and do it later, we're gonna take advantage of the fact that we're in a video, right? You can take me right back to right here and take me back to right here and we could get started. So one of the things that I love about Twilio's documentation is that you can just copy it and it should work. So this is what was happening when we created something here, right? So we created a message. So this is, you get this authenticated client, right? We know what that is. We authenticate with our client, with our account SID and our Auth token like we've been doing. And then we're gonna do this messages, a client. So client.messages, there's our REST client, .messages.create, and we're gonna pass in the from the body and the to and it's got all the information that we know. And then there's doing some of this JavaScript stuff. So then we're gonna get a promise back and then we're gonna get access to the message. And this console log is going to print out to the screen. I don't think we should send a message. Why don't we look at the messages that we've done? Let's do that. So I'm gonna go to that example. So I'm gonna choose down here, this list all messages. Awesome, so we'll take a look at all of the messages that are in the account. Now what I can do is I can just copy this. So I'm gonna copy this and I'm gonna run it on my local machine. Now I'm just exploring, and this probably happens as you're looking at APIs. So typically I have a folder on my computer called Scratch. And if you wanna make one, you do Mkdir Scratch. Just kind of put this wherever you want to. And then you get into that directory. If you're doing this in your terminal on Windows, there are some instructions in the notes on how to do exactly that. So now I've got this directory named Scratch. Now I told you before I was using Visual Studio Code, which I hope that you have installed. And so I'm gonna do code dot, and if this doesn't work for you, there are instructions on how to get this installed properly on your machine. What it should do is pop open my Visual Studio code directly in that directory. So I'm in this directory here and I'm gonna make a new file here. I'm gonna call it explorer.JS 'cause this is typically what I do. So I'm gonna come in here and I am going to paste that code. Awesome, so now I have this code here and this code is on my local machine, which is awesome. So now I'm gonna try to make this code run. Now one thing that I know for sure that I need to do is I need to download the Helper library. So if I wanted to go here, I could go to this node install. I happen to know how to do that. So I'm gonna go up here under terminal and I'm gonna do New Terminal and in Visual Studio Code, this is really nice. My terminal can actually run the same terminal that I used to open it is running down here in the bottom. And what I'm going to do is I'm gonna use a package manager to install the Twilio Helper library. So I'm gonna say NPM Install Twilio. So NPM is node package manager. And if you do not have this, if this does not work, check the notes because it means that Node is probably not installed on your computer. And if Node is not installed on your computer, there is a great walkthrough in the notes on how to get Node installed. So I now have Twilio Helper Library installed, which means this required Twilio statement here is requiring that library. Remember in REST Fox how there was an environment and we stored the account SID and the Auth token? We can do the same thing on our local machine. We can set up a little environment here. And actually if we go ahead and we click this Twilio Secure, there's some great examples in here and how you could do that. So one of the things that this suggests doing, you can see it's for Mac and Linux and different, different shelves do different things. If you run this in your command line, you can set your environment variables and then when you run Node it will work. I'm gonna do, I'm gonna do this one. So I'm gonna copy, copy this here and I am going to just paste this. We'll paste this, I'll show you what it does. So it's saying we want to export my account SID and my Auth token just we're very familiar with these days. So we're gonna do that. Let's do this real quick. So I'm gonna pop in my account token there. I'm gonna go back over to my console, scroll down and grab my account here. And then I'm gonna paste that and I am gonna go and grab my Auth token and I am going to paste that. So again, I got to that, oops, accidentally pasted my Auth token in the wrong line there. So I know that it started with a four and I'm gonna paste it down here where it says Your Auth Token. So basically what this is doing is this is writing a new file that will have this information. I'll show you that here in a second. So there's my, it's gonna write these two lines. I'll show you what that looks like. So it's gonna create a new file called Twilio.env and then it's gonna append that that's what this double --Twilio and then it's gonna source that, which means run that environment variable. So if all is working well, now if I say Echo and I can do Twilio account SID, we can see that I have that available and that created this file here called Twilio.env and you can see there is my account SID and my token, which is nice because now this code works, it should be working and using this. And in fact if all is going right, so I've got Node installed, I installed the helper library, I put my account SID from the console into this Twilio.env and then I did this final command here, the source Twilio.env which will run that file and put those variables into my environment variables. And as I showed you that they were working. So let's go ahead and let's do node explorer. So what's gonna happen, let's take a look really quick. I'll show you, let's see, let's make sure we got it working. Cool, we did so let's walk the code really quick. So this is pasted straight from those docs. So we're getting a client back from this required Twilio, this is a Twilio library and when you get the Twilio library, if you pass it in account SID and an Auth token, it'll automatically create a brand new REST client for you, right? So this is a client that you're able to use to hit the REST API, a Twilio. And because it knows who you are, it's able to access stuff on your behalf. So very similar to what we were doing with the Curl, but this client, we can use this multiple times, it will always be authenticated. So we're saying of all of the messages, we want to list them, right? So we wanna get a list of all of the messages, actually not all of them, only 20 of those. So let's go ahead, I'm gonna just, we know that we haven't sent 20, I'm gonna get rid of this. So you can kind of just see this other style here. So we're gonna say of those, we're gonna do this list and then I'm gonna bring this back a little bit here so you can kind of see, let's change the structure of this a little bit. So we'll say client messages and then we're gonna do a list on those. Now the way that this works is this is asynchronous. So JavaScript is asynchronous and if JavaScript is new to you, you probably haven't encountered its asynchronous behavior. What we're going to go over here might very well be overwhelming, but it'll make sense someday if you stick with it, I promise. Now I've added notes, but really please, please, please, please do not let this stress you out. I just want this to go over your mind about what's happening here and it's important to understand because our client here, these list methods are asynchronous that which means that it's gonna go and run Auth and do some things and then it's going to come back. When that comes back, it's gonna run this code. So this is how a promise works. So it's going to say then after you go and make that request, then give me the messages and just so you, what's kind of strange about that is if you're probably used to code working like this. So I'm gonna write out to the screen that's this console log. I'm gonna say Starting Program. And we should see that line print. Now you might think that this is going to print, it's gonna run this and then go, but if you, I'll show you here, if I do this console log and I say gathering message log, what you'll see is it's gonna say this, this line's gonna start, but immediately it's gonna go to the next line. So let's do that. Let's run that one more time. I didn't save it. So of course it won't do anything. So you can see this little dot here in visual studio. It didn't save, so I'm gonna save that, run that one more time, here we go. And you'll see right away it's a starting program gathering message log. So it ran this, but then it went down to here. So it did not wait because this is asynchronous. What's happening here is asynchronous and what's happening is client message list returns a promise. Now it's a promise that in the future there will be a value and that value is messages. And so the way that you write that code is this then waits, it defines a function here and as soon as this is done, it will run this function. As soon as they come back, it will run the function. So that's what happened, right? So it came, it started, it then ran the function. And when I say function, you might not have seen this before, but in JavaScript you can make a function. I'm gonna put parentheses here so it's a little bit more clear. These are the parameters for the function. And this fat arrow is saying, this is what happens when the function runs, this like little, they call it the fat arrow. It's kind of cute, right? So it's an equal sign and then a greater than, it's called a fat arrow and that's a way of quickly defining a function and so you can see here, there's another one here that's doing it as well. So it could be a little bit messy as you're looking in. See how all these parens that we're looking at, it's kind of kind of hard to understand and read. If this is your first time looking at that, I totally feel for you and so this messages that comes through here is an array. So, what was very nice is it came across this messages list. This is an array, it was a JavaScript array by itself. They have this method called For Each on it. And it will let you loop through each of the values that are in an array and you'll notice that the object that was inside of that array has some properties. So what happened was the client went and made the request, made the http request, it got back that JSON that we saw. Let me just go show you one more time. Let's make sure that we're looking at the right thing here. So we, this is the same code that we just saw. This JSON was returned, right? This JSON was returned, but what the client did for us was it inflated these into messages, right? So these are, this is a string of things and it came back JSON but I'm able to actually work with each of these messages as if they're an object. So let's look at that again. So list returned this object, this array of messages and each one of those in that array I'm able to use an array method for each. And this message is an actual object that has a property called SID. So again, if that is all new JavaScript terms to you, don't worry too much about it. Basically we went and got the messages and we showed the messages that we got, that's what this is saying. One of the things that I want you to be careful of as you're looking at promises, and you might see this sometimes as you work with APIs, 'cause oftentimes APIs that you hit are going to be asynchronous like this. You might see that you need to be able to, you might run into an error and what might happen is it might get swallowed. In fact, let me cause one to happen. So here it's supposed to say Auth token, I'm just gonna put in my luggage, the password to my luggage 1, 2, 3, 4, 5, 6. So that is not my account SID that is going in there. So I had the wrong account SID. So I'm gonna say that hey this is the client, this is what how I want you to authenticate and it's gonna go to try to make this and it's gonna fail. Let's see what happens when it fails. Well I didn't save it so let's save it again. Boy that's a lesson that I really hit in the home. You gotta make sure you save your file or the code doesn't run. So let's do it again, and you'll notice that I didn't get any error at all and that can be confusing, that is something that is very strange because obviously something wrong happened, I didn't get any of the messages back, but it doesn't look like I had any problems. So what's happening 'cause this is running asynchronously, this then never runs, right? We never get a chance to run this 'cause this list method didn't actually finish working. So one of the things you always wanna make sure that you do is to every promise you can catch and you can catch an error and I'm gonna make a fat arrow 'cause I'm gonna have a function happen here that says console dot error, E-R-R. Okay, so now I'm gonna print that out, I'm gonna print out the error. Let's run that again, let's see what happens. Ah, now we see the error and you'll see that sometimes this is what comes back is there was an authentication error, right? And we got a very specific error on this 2003 and it will help us kind of look at what's happening. Oh, here, great. This is right. My Auth token is wrong, the wrong combination of account SID and Auth token. Exactly. That is what has happened. So cool use of things there. I'm gonna put this back so that we have things working. So this was Auth token and I can still leave my error in there. I'm not gonna hit an error, so it's not gonna happen. So a promise has a then and it also has a catch, right? So let's do that. So I'm gonna run that one more time and save it. Wow y'all, I gotta get better at saving. Here we go. There we go. So now we're back to working again, awesome. All right, I wanna show you a little bit of a different way that JavaScript can work asynchronously that you might also see. And this is really syntactical sugar. It's called async a weight and if you just wait a bit, it'll all sink in. I promise that's a, there was three jokes in that one. That was a hat trick of a joke. All right, so here we go. So the way that it works, the way that this works is you can say that a function is going to be asynchronous and we want this to run asynchronously, so I was thinking we're getting ready to start using our number in an application and to get there we need to clean it up. We have a bunch of weird messages in there that aren't gonna be relevant to the messages that we have. So I'm gonna make a new function and I'm gonna call it "Delete All Messages," okay? And when you define a function, you can kind of put, this is the parameters that it takes. We're not gonna say that, there are no parameters. And then I'm gonna run this function. So while this is an asynchronous function, I can actually make it look more like it is in line so it can kind of run the way that we want it to. So I'm gonna say "const messages" equals await. So now I have, because the function itself is asynchronous 'cause I've used this here I can use this keyword, await, and I'm gonna say client dot messages dot list. And so now I think this is a little bit more clear, right? So this is basically doing the same thing, right? These messages are the same messages that were coming into this function, but now it's out on this side. So I have this variable that's called messages. So, and that's in array, right? And I could do this exact same thing here and I could list that the same way. But let's go a little bit farther. So I'm gonna say for each of the messages, for each message that is of the messages array. So these are those inflated messages that we saw. One of the cool things that you're able to do with the client is the object that's returned back has actually has some properties on 'em. And one of those properties that it has is called Delete. Before we do that, I'm gonna make sure that, let's do a warning here real quick. So I'm gonna say console dot warn, we're gonna say would have deleted, I'm actually gonna use, if you use these back ticks, this is kind of a neat trick. You can use this back tick to do string interpolation. So we'll say would have deleted message dot SID. So again, that's the string identifier of that. So would've deleted message dot SID. So, and we will close that function out. All right? And now I'm going to call that function in this, you know, of course that's how we call it. And this is would actually be a promise, this would be a very similar, so we could do this, we could do a then, well in fact let's do it, we'll say then, and if you wanted to call, make a function that has no parameters 'cause I'm not returning anything, right? I'm not returning anything from that function. I'm just gonna say console dot log. And I'm gonna write done and I will put all of these, this code into the notes so you can also copy and paste it if you want to. And I'm gonna do the same thing that I did before. Catch the error and I'll do will do console dot error. And now if you do the console is, you know, of course what's running when the program runs, it's running out to the screen and there's different levels that you can do and error is one of those. And if I just pass the error that happened there, so I'm gonna warn that we would've deleted the message but let's take a look at what happened. So I'm gonna get rid, I'm gonna keep the starting program here, right? So we can do starting program and then it's gonna do delete all messages, it's gonna call that and then when it's all done, it will say done, I'm gonna get rid of what we had here. Okay, so we have delete all messages, it's gonna go in, it's gonna get a list of all of the messages. It's gonna loop through each one of those messages. And when it is done, we're gonna, right now we're gonna warn that it's would have deleted it and this is what we're eventually going to do because there's a function that's available to it. All right? So I'm gonna save that, I'm gonna run it. Let's see what happens. Okay? So it would've deleted some of our SIDs. And again this is the MM, this is, the MM means that it was the MMS which is the one with the picture and the rest of the SM's that we have. So I think I am ready to do this. I hope that you are ready to do this as well. Again, this code should you want it is available in the repo 'cause you want to run this 'cause you want to delete these messages. So let's, I'm gonna say, I would've deleted, I'm gonna say deleting and then here we go. I'm gonna save that, I'm gonna run it. And so message, the message object that's coming back from this client is really has enough information to make another API call to delete itself, right? Because the object itself knows how to do that the library's made an object that is smart enough to be able to call delete on it and it feels like it's just working that way, but it's really making a REST API call to make a delete request. It's pretty cool right? Here we go. Message dot delete is not a function. What I meant was actually remove, so the function name is remove on the message. So here we go. So, and you saw that there was an error, right? That was the error that just happened, good thing I put that catch in there, otherwise we would've thought it worked. So here we go, so in Node explorer, remove instead deleting, deleting, deleting. We deleted all of those. So remove is the name of the function that's there, but it is doing a delete, making a delete call. Cool, so we have now cleaned out and if we try to run it again, you'll see that there's no messages left for it to delete. Awesome, now if you have just watched that and were very confused, let's walk this last bit and then I want you to rewind it one more time. So I've made a function that is asynchronous and that function is called delete all messages. And because it's asynchronous, I'm able to use this await which will return this, this client messages, that list returns a promise, okay? But, and a promise of the future. But because it's being awaited, it's going to return it right here in line. Then I'm gonna loop through each of those messages and because that message came back from the API and an object was created thanks to our helper library here I have a method on that message called remove. And it will actually go and do that next level, the next level of delete there for me. So it's really nice. This object feels like it would feel if you were writing JavaScript code, it would feel this way. But behind the scenes we know that it's doing this API calls and the client library has extracted all of that away from us. And if now if you go and you take a look, let's go back really quick, let's take a look. There's other helper libraries. So if Python happens to be your language, there's how you do it. So it's client messages dot list and for record and messages and you print the record SID and you can see that the code looks a little bit different in all of the languages that you go through, but it's also kind of similar. And so that's really nice about the standardness of a REST API is that the helper library is producing code that feels the same in each way because the library's kind of the same. And you'll find that as you use other APIs and they have helper libraries, they will mimic the way that the REST API looks. So I realize that was a lot. I don't want you to get hung up if you feel like you can't completely understand what that is. In the next unit what we're gonna do is we're gonna go into more deep things and I know you can do this. So, this code is there and also if you feel like you want me to go back and explain that again, please, please, please, please pause me, slow me down, let me walk through those different things but don't feel like you need to be able to read this. I want you to just conceptually understand that you're using a helper library that's abstracting away all of the HTTP API things that we were doing with curl and we are doing with REST Fox. This is just doing it in code and it's doing it for you. A lot of the magic is gone and hidden and tucked away and it just feels like you're actually working with these objects. That's the power of the abstraction. Awesome. Did you see how the helper libraries are all similar yet match the development workflow and style of each language? This is one of the benefits of helper libraries in general. They abstract away the HTTP client connection and the boiler plate necessary to make REST API calls. They also behave as you expect them to behave. It feels natural. The way that we were able to delete from the resource itself helps to unlock another REST API constraint scavenger hunt item and that one is uniform design. Now this constraint has four subsections, one of which we just discussed, resource manipulation through representations, because enough information was included in the response, it was clear for us how we could modify and delete the resource. Another subsection and here is resource identification and requests. That's the URIs that are included and we've seen that. But because the URIs are included we know how to get and manipulate specific resources. Uniform use of the http verbs is pretty powerful. We just wrote some scripts that make use of helper libraries. These libraries are super handy for automation based tasks or batch scripting, which is like making a whole bunch of calls at once. Now while we're talking about this, we should cover another common tool for talking to external APIs and that one is CLI, command line interface. There it is again. Command line interfaces can be used to make API calls from an executable on your machine. More and more these are showing up for tools that require authentication and do a bunch of different services. This concept is popular amongst cloud providers where setting something up needs to be done quickly from the command line. Check the notes for more. Another commonplace where you'll use helper libraries is from within applications that you're building. Let's get to the final unit of this course and implement an external API into an existing web application. You've got this. Ooh, we're here. I love this part. The building part. We are going to build a web application that shows off a set of user submitted photos for a specific prompt. But here's where our app is gonna stick out from all the rest. We are gonna let our users submit their photos and captions via a text message. What this will enable us to do is put up signs and billboards and physical spaces that says text a photo to this number and then our site will gather those on a webpage and display them. Now you're probably wondering two things right now. The first one is probably, wait, what are those photos they're gonna be texting? And that's a great question. We are gonna be building this application so it can be dynamic. So you can define whatever you want. Like text me a photo of your dog, send us a photo of the view out your window. Snap me a pic of the best impersonation of me. I don't know, anything along those lines. Now secondly, you're probably wondering, wait a second, you said I didn't need to know how to code. If you already know how to make a website, this part might not have phased you. But if building a website is outside of your learning journey thus far, no sweat, I've got it set up and we're gonna take our time and we're gonna focus on making things work using this API. All right, let's do this. Okay, so I have a template here in the notes. In the unit three video one we have this index.html, which is our web application. If you come in here you can scroll, you can kind of see things here. The app is called Pickle where you get to pick your pics, Peter picked a pickled pickle, that sort of fun joke there. And then we're gonna click this Raw button right here. We're gonna get a hold of this raw and I am going to highlight everything and use the magical developer Command C copy. And then I'm gonna come over to back to my scratch on my visual studio code. I'm gonna make a new file. I'm gonna call that index.html, hypertext markup language, right? And I'm gonna paste that right here. So now I have that code locally on my machine. If you are a get user, you could definitely check this out and have your own version of this if you wanted to but that's a good way to get this here locally 'cause we're just gonna explore around here just for a little bit. Let's take a look at this file as it exists. This is something that might happen to you as a developer who knows now about APIs. They might say, "Hey, I've got this template and I would love for you to be able to set it up to make the API work." So the first thing to do, if you wanna look at an index file locally on your computer, you could set up a web server. I've made it so we don't need to have a web server so we can just go ahead, I'm gonna go to my terminal, I'm gonna do a new terminal here. I'm gonna open that up and I'm just say open index dot html. Now what that's going to do in my Mac is going to open this up for Windows, take a look and see how to do this exactly. But this what this will do, it will update my pickle here. So, you can see this is user scratch and then you know my, whatever it is, it's in my directory there and this is what's happening. There's some nice kitty photos there. I'll show you how that's working and if you click into one of them, you get a nice little gallery here and you can switch between the different kitties and you can see the text that the user submitted. That's kind of where we're going with this. That's what we're planning on doing. Very nice setup. Simple one little pager application because I'm using some APIs to be able to do that here locally. I'm using, remember APIs, not Web APIs, but I'm using a View as the framework that I'm using. I'm using a framework called View and it has an API and I'm also using this Silent Box which is allowing us to do that popup. It also has an API. Let's take a little bit of a look here. So I'm gonna move a little bit slow through this just so in case it was your first time seeing something like this. I've got some setup here in this head tag. You can see this html, this is the head tag. There's some setup. So I'm using View and I'm also using Silent Box and I've got some very minimal styling. It's not my forte. And oftentimes you're given a template like this. So you're given, hey, here's a working thing. I would love for you to get some APIs in there. So the body of the app has this. You'll see notice this little mustache, mustache and it says call to action. So in view this is part of their API is if you use this for a template, it will be replaced with something from the View Objects data. So you can see here, there's this call to action and that's what this is and this is why I can change this and make this say whatever I wanted to say it would be here. So whatever we decide to do with our apps, whatever kind of pics that we're trying to collect, that would be where we would change that. And then you also see here, there's this silent box and it's doing a gallery. And the way that that works is we pass in this gallery from, again, from this View Objects gallery. You don't necessarily need to worry too much about this, but I wanted to show you that there is, this is how View works, it's a front end framework and it provides an API where if I give it a function called data in whatever's in here will get returned to it. And then there's some more, I can define some methods on the view object. One of those methods that I've defined is called load images. Part of the API that View creates is there is a lifecycle method called mounted, which means that when the application is ready and it has been mounted onto your HTML through the JavaScript, it will call this function. So it's gonna call this load images function. In this load images function, you'll notice it's an async image and I've got some to-dos in here. This is someplace where you might be communicating back and forth with people as you're working together on a project. So use the messaging API to use submitted photos and also create a web-based API that matches this expected response. So that's what we're gonna do over the next couple of videos here. So what we see in the start here is there's this gallery and it is an array and it's got some stuff from this. There's a website called Place Kitten that I used here. So you can get different versions of kitties here. And there's a description and there's an alt tag, which is important because for accessibility reasons, this is what it will say on the picture. So that is what is happening to be able to make that work. So we now have our app here locally and we can change things. So one of the things, one of the photos that I want to do, I love to get photos of burritos from around town. So I'm gonna change this. I'm gonna say submit me a photo of your burritos and I'm gonna save that file. So see it's not saved, I'm gonna save it. When I go back to my file there, when I refresh it, you can see that it says "Burritos." What are you going to want to gather? Why don't you go ahead and change that, change that to whatever it is that you're wanting to gather as we build those projects through. And of course you know you see that you can change that however. So make sure that it's downloaded and make sure that you can change that, that you can change this file and it opens locally on your machine. Cool, and so now we have a little smattering of APIs here already. So we have a web, we have HTML working here. We have this view and this view API has a very specific API that's doing this mounted here. But remember it is actually an API and we're going to use a web-based API to be able to get this information and we're gonna do that here in just a bit. Now that we got our file all working, let's deploy it. And by that I mean let's get it up on the public internet so everyone can see it. That is of course after you take a quick break. (upbeat music) We are gonna get our webpage up on the internet so others can see it. And this has gotten much easier as time has progressed. You used to have to set up a server, like a physical computer, buy a domain name and configure it to point to your machine. You had to figure out where to host, like where to locate your server so that it was always on. And arguably the hardest part after it was live, you used to have to watch over it in case too many people came to it. You didn't want it to get overloaded, you wanted it to scale up and be able to handle the traffic. Those servers are still around but these days you don't really need to worry about them too much. Now I'm sure that you've heard the term the cloud and the colloquium. The cloud is just other people's computers. Well let's talk a bit about serverless. Serverless is just other people's servers. It removes all those previous things that we had to worry about and it offloads your concerns. I can tell by the look on your face that it's probably better if I just show you, let's get this application hosted. So we're gonna have Twilio host our code for us and that is to say we are going to have Twilio be our web server that will be used to serve our HTML. Our project will be serverless. Now the way you do that is by using Twilio's serverless environment, which is here under functions and assets. Now if you don't have that here, if you click Explore Products and you come to Developer Tools and you come over to Functions and Assets, you can click this little pin icon and that will make it show up here. So I am going to create a new service. So I'm gonna go Functions and Assets, Services, and I'm gonna say Create Service. It could be whatever you want. I'm gonna call it pickle, like pick your pics with Pickle Peter. Services allow us to group our functions and assets together for our application. So I'm gonna click Next and what's gonna happen is we're gonna open up to a very nice IDE that'll allow us to edit our code. Now a friendly reminder, if you're having a hard time following along because my screen looks different than yours, you are using a new and improved experience. So check the notes for what might be different. Now traditionally these services here are used to power Twilio based applications. Remember how I said you could respond programmatically to an incoming message? Well, functions are a great way to do just that. In fact, our current number has a default response and we might as well fix it while we're here, but before we do that, let's get our HTML code up and running. So what I'm going to do is I'm gonna grab code from my local machine and if you want to, you can just grab it from GitHub, check the notes for more on that. But I'm gonna go add, I'm gonna choose Upload File, I'm gonna find my file, my index html and I'm gonna choose Open. Now what we're uploading, we'd like the world to be able to see it. So, I'm gonna choose Public and then I'm gonna choose Upload. So now this files over here, you'll notice this little green dot. And this means that it is not yet deployed and that is, it's not yet available on the internet in this current state. So let's do that. I'm gonna do that by clicking this Deploy All button down here. And now we see that it's green and I'm gonna go ahead and choose copy URL and I'm gonna open up a new tab with that there. And we will see that our site is live, except it says burritos and these are kittens, but we're getting there. So it's working, it's up, it's on the internet. I could share this with people. The pickle site is up and running on Twilio's servers. One of the things that I used to have to worry about was scale. Like what if I got a whole bunch of requests to this site, would it fall over? What the serverless solution is doing is allowing me to not need to worry about any of that anymore. Twilio is handling all those concerns for me, which is great 'cause now I can focus on what I was building. Which by the way, we need to handle that reply programmatically, right? So the way that Twilio does things is with web hooks. Now if you haven't encountered web hooks before, I have an entire course on them that I link to in the notes. Web hooks are sometimes called a reverse API. That is, instead of you calling the API, the API calls you. So let's configure our number to make use of the right web hook. So I'm gonna go back to my number over here. If I look under phone numbers and I do manage, I'm gonna hold down command or control and click Active Numbers, I'll open up a new tab. Nice little hack to keep your screen open here. So I've got my numbers here and if I come in here to configure it, what happens is I'm gonna scroll down. So here's the voice section and then here's the messaging section and it says, when a message comes in to this web hook and it sends to this URL here, it does a post to this URL here. So the way that Twilio makes use of web hooks can be thought of like this. You know when I hit this URL, right? This URL in my browser, my browser doesn't care about what's happening at that endpoint. It could have been anything, any web server like Express, Jingo, a Java server, it doesn't matter. What matters is that what was returned from my server was HTML or hypertext market language. My server responses with HTML and my browser renders the page. Now the same is true with Twilio. Someone is going to text our Twilio number and Twilio is going to send a request to an endpoint. In this case, this endpoint here, it doesn't matter what is happening on the other side as long as it returns TwiML, or Twilio markup language, they look very similar. HTML and TwiML. Twilio will be able to render your application. So we could set up a new web server to host this application that returns TwiML or we could just use a Twilio function. And like I said earlier, that is what these are commonly used for. So let's pop back to our service. So I'm gonna come here, I'm gonna add a new function and I'm gonna name this function Incoming Message 'cause that's what we're gonna do. We're gonna handle an incoming message and there is some very nice default boiler plate that is commented that comes through. So boiler plate is code that's provided. That's usually the most common thing that you're going to be doing and in this case it is, it's boiler plate for how to respond to an incoming phone call. It's kind of like the hello world of voice applications, but we are gonna be building a messaging application. So we'll need to tweak this just a bit. Now I've put this code, I'm about to show you into the notes. So I don't want you to feel like you have to type this all out or even fully understand every line. I'll step you through it, first though, let me walk you through this function just a bit. So Twilio functions all export a thing called a handler. And that handler takes a function that takes some parameters, context, events, and callback. Context here is an object that holds information about the function that's running, like it knows the domain, it knows the name of the function and the event here, you can kind of think of this like a web request in most frameworks and if you haven't seen a framework before, this is kind of the way that information is passed into your web application. So, this is the event will hold everything about the text message that was incoming because that's what Twilio does. Twilio's going to pass that information through here. And for instance, that message will have the to, it'll have from and body. And again, because when the text message comes in, we are going to point our phone number to this function. So Twilio will post the information here, it will call our function instead of us writing code that checks if a new message was added over and over again. Twilio is gonna call us. The API is going to call us via a web hook. Web hooks are pretty cool. Check the notes. And then finally, there's this callback object here, which is how we send information out of the function. It's actually a function, so we have this callback, this is the errors that might have happened, and then this is what gets returned. And here's that TwiML, Twilio markup language. So I'm gonna get rid of a couple of these lines here. These are sort of demo lines, I'm gonna get rid of that and I want you to be able to see what's coming into the message. So I'm gonna start up here. I'm gonna do a console dot log. And what what this does is when the function runs, if we want to, we can see the message, it will show up down here. So let's say that we got an incoming message and it was incoming message and we'll just do a colon and then I'm gonna use this dollar, this style of string interpolation. So I have the event object, and on it there is a property called body with a capital B. So that's being passed in there. So when the function runs, we will see that the message came in 'cause Twilio's gonna pass that message and we'll see it there. And we're just gonna say thanks when somebody sends this in. So we don't really need to do anything with this message, but you might wanna filter it or handle things differently based on what they said in the message and you totally could do that. But you probably also wanna check the photo that came in was actually a burrito or something, not inaprops. You could do that and there are APIs for that, but that's a little out of scope. So instead of a voice response, we're actually going to return a messaging response. And there's a little helper library here, right? So a little helper library for TwiML and it has this TwiML object. And before it was doing say, which is text to speech. So if you wired this up, it would say hello world in like a computery, but actually pretty good sounding voice these days. But I'm gonna change this to be a message 'cause that's what we wanna return. We wanna return a message and we wanna say, thanks for your submission, right? We wanna thank them there. And we can also send any sort of emoji here. Let's see if maybe a camera that sounds, yeah, it's nice. Thanks for your submission. And so what's happening here is this object, it's a fluid API. It means that it doesn't return anything. You kind of tweak it and it builds as things go on it. So you'll notice that this isn't returning anything. I'm modifying this object and then when I send it out at the end, that's how it goes out. So let me, let's just, let me show you what that object looks like. So again, I'll do one of these console log and use the back tick and we'll say TwiML. So Twilio markup language was TwiML. And you'll see that it looks a lot like html. There are some rules to it, but we don't need to learn them all right now. So I'm gonna save this and just like before, you'll notice that this is gray, it hasn't been deployed. So I'm gonna click Deploy All and while that's building, I'm gonna head back to my phone number page and I'm gonna refresh it. So on my phone number page, I need to change my message down here it says, when a message comes in, we want it to be a function that is in the pickle service. That's done in the UI. And we want to choose incoming message, which it hasn't finished deploying yet. Just finish deploying, one more time. Let me refresh that page. So that shows up for us. We're going to go to, when a message comes in, it's going to be a function and it's on the pickle service for this UI and we wanna do incoming message. And if we do save, alright, so we should be all wired up. I'm gonna click Clear Logs here, and I'm gonna turn live logs on. You can see that this says live logs on when it's ready. And I'm gonna clear the logs one more time. And what I'm gonna do now is I'm going to send a message in and we should see this, we should see what I send in and we should see the TwiML that was sent back and I should get a response back. So let me send that message here. Let me send this text. All right. So, oh, check out this. I have this beautiful picture of a burrito. I love when burritos can stand up by themselves. And this is an awesome one. I'm gonna send this in. So check out this beautiful burrito, little emoji. I'm gonna send that through and we should see here in the live logs, we should see the message come through. There we go, so look at this beautiful burrito, and this is the TwiML that was generated. So you can see it's like tag-based. So there's a response and there's a closing response and there's an opening message and a closing message. Thanks for your submission. I don't want you to feel like you need to learn TwiML. You could do that later if you need to, but this works. So I got my message back. Now, remember, since we are in trial mode, if somebody else sends in a message to your phone number, they're only gonna get a message back if they're a verified sender. So that is a limit of the trial API that we're using currently. Now most APIs have limits. There's only so many calls you can make. There's, you can only send to verified numbers. There's just different sort of limits. And that's what we're working with here right now. The limit is that you can only send to verified numbers. They can still submit, they just won't get this "Thanks for your submission." So your phone number should, so when you submit from your phone number, you should get it just like I did. All right, so we're looking good. We have our site hosted and we are handling submissions by thanking them. Let's get to some more cooking. Now, if you're interested in learning more about applications like this over the phone, check out the notes for more resources. I have an entire course on this if this piqued your interest. But for now, let's get back to our API. Now, with our ability to host our own application, we can focus on designing our own API. Now the great news is that Twilio functions makes it really straightforward to return JSON, remember, that's JavaScript object notation, the lingua franca of the web. Let's design our web-based API to return the expected format, and we can make use of Twilio's message API to get a hold of all the messages that we received. Do you see what I did there? Get, get it? All right. I'm a get outta here. I can't stop. All right, let's do this. Okay, so we are gonna actually write an API and we already have a spec or a specification, right? We need to provide for this specific plugin, This silent box has this gallery plugin and it has a specific API that it defines and that API looks like this, right? So remember that we're setting this gallery and we're setting an array and we're setting this information here. So I think we should start by creating an endpoint that returns exactly what we have here. We should return an endpoint that does this, the returns this, and then we'll move forward from there. This is what I do when I find myself in a situation when I'm working on a project with a team of people, I take what they expect in a template and I return it from an API. This way they can keep working and I can keep working too. So let's do that. I'm gonna create a new function. So I'm gonna choose add, add function, and I can name this whatever I want. And I suppose we should be clear, right? We're gonna make an API, we're actually gonna make one so slash API and then I suppose we should probably say what it's gonna be. So we'll do a Pics API here, right? And I'm going to press Enter and that will get me my boiler plate code, of which I am going to get rid of everything. So thank you for the help. We're not actually returning TwiML this time. We're actually gonna return an object. And what I'll do is I'll copy the hard coded array from this index file here. I'll come in here and I'll copy this hard coded. Now hard coded means it is just like in the code this way, right? There's no way that this is going to be dynamic. I'm gonna change that here. I'm gonna paste that in here. I'm gonna name it the same thing. So I'm gonna create a new variable called gallery and I am going to just paste that hard coded code there. There we go. And then I'm gonna call this gallery. So again, I have an array. That's what this bracket here is an array of these objects, that's what these objects are. These mustaches, they open up and the objects have these properties here and these are representing the pics that that plugin requires. And now I'm gonna use this callback function to return that gallery array. One really nice thing about this Twilio function is that if I pass it an object like I did, it'll automatically return JSON to anybody who requests the URL, so let's do that. So I'm gonna go ahead, I'm gonna save this and I'm gonna deploy it. Now one thing to note, by default it was actually protected. That's what this little key lock thing means here. So I'm gonna click this and I'm gonna change this to be public 'cause we actually want anybody to be able to see it, not just Twilio. So this is what we're gonna do. I'm gonna change this to be public and then I'm going to choose a deploy all and you'll see that it's gray and when it's ready it will turn green for us. And so I'm gonna go ahead and I'm gonna copy this URL. So I have this URL already and when it's green, when this goes to be deployed, so it's still deploying, you can see it's deploying and you'll know down here when it'll say build completed and it'll say deployed. So it's deployed, so I copied that URL, I am gonna go hit that URL and let's see what we get back. Awesome, we got it. So we got the kitty descriptions and blow this up a little bit here. This is JSON, it automatically built this for us, right? It's in the right format, which is very nice. In fact, we could probably take this and why don't we, we'll go over to the Thunder Client and take a look at what's going on over there. So I'm gonna come back to my Thunder Client, I'm gonna make a new request and I'm gonna hit, I'm gonna do a get to this API that we just built and check it out. It comes back, it comes back with 200 OK. And here's, the stuff that's coming back. There's even some headers in here. Oh, sorry, some. If we look at the response, we can look at the response headers over here and we can see that the content type was set to application JSON, Twilio always sends back to the shenanigans none, which I love. So now what we could do is we can give this URL to the team that's working on making the front end, you know that view application, they could wire it up, they could take this. And as long as we match the same format in what we return, that is, as long as our API maintains the same contract, everything should just work. So that's pretty awesome, right? So let's move on to the next part. I'm gonna comment out this bit. So let's go ahead, let's give it a, we'll we're gonna go ahead and make this an empty array, right? So that's how you make an empty array. And I'm gonna comment this out so that we have it so that we can kind of look at what the format is as we build stuff here. So I'm gonna comment that out and in fact I don't think I need the second one. I'll just get that first one there and give us some space there, awesome. So now let's use the text messages that were sent in, our incoming messages. So we are gonna write some JavaScript code. Now if you aren't quite fluent yet in JavaScript, remember that is okay and we've all been there and we all, all of us, I guarantee you everybody watching this understands that what you're going through can be challenging. It's a new language. I want you to try a follow along conceptually. And I want you to take your time and I want you to take advantage of being in a video-based course. This code that we are going to write will be available in the notes and I will walk us through it and then I'll go over it again translating it into the concepts that we've covered. Okay, are you ready? Let's do this. So Twilio functions have another great feature. I can get access to a REST client, to the Twilio REST client then authenticate a Twilio REST client from the context object. So context, get Twilio client. Now remember that is going to be using my Auth token and my account SID, and it's on this context, it just automatically is authenticated, which is really powerful 'cause now I can get access to my thing because this function is running as me, right? So that's why it has access to that information. So remember we wanna get a hold of all of the messages that were sent in. So we're going to use the API to do that. And remember we could have multiple phone numbers. So I'm gonna get the messages that were just sent to this phone number. So I'm going to await 'cause remember it returns a promise. So client dot messages dot list. And I need to do the ones that are specifically to my Twilio number. So that's (561) 816-5433. And I'm pretty sure that's right. I'm gonna look one more time at my, oh there it is. Yeah, that's it. So that's my phone number there. (561) 816-5433 you could go. So there, it's also on your console. Remember down here at the bottom, (561) 816-5433, that's what I wanted. I put that there and in fact, you know, that's something you can have multiple numbers and that might be something that you want to store possibly in an environment variable. So I think we should probably do that. Let's do that. So I'm gonna take this number here and I'm gonna store that here. You can see it in the functions and the services here we have this environment variables, let's add to that. And you'll see here, actually add my Twilio credentials. My account said my Auth token to M, so that's why context get Twilio client works is because we've checked this. If not, it won't work. So, but it's checked by default. So we're gonna do Twilio number and that value is going to be that and now in my code, what's rad is I can use that like so, I can say context dot Twilio number, I can access anything that is in those environment variables that way and it's now it's in this code. And now when I share this code, you won't need to do that. You will need to set your environment variable though. Awesome, so, and now what we've gotta access to the, well actually first we set await and we need to make sure that this function is marked a sync so that that's required, right? In order to make this work. So now it's going to get the messages, it's going to return the messages, and now we're gonna loop through those messages. One of my favorite ways of doing that is this for of loop. So we're gonna say for message of messages. And for each one of those messages, we're gonna go through some things. So one thing you might not have thought about before is that when you send a message, you can put multiple photos. I think typically whenever I send, when I just send one or then I send another message and another message, you can actually add multiple pictures before you send it. So let me, let's do that. Let's get a hold of all of the pictures that are available. So we'll say comp pics, we'll call, we'll call our variable called pics, right, for picture, short for picture and we'll say, await message. Now the message object that came back from this API. Now we know that this was an API call, but it is an object. And that object actually has access to these sub resources, which was media, which we walked through this before, remember where there was the media URL and we grabbed that media URL and we looked at all of them that were available? This is basically doing that same thing. And we're gonna get all of the media that is available. All right, so we have that, we have the message, we have all of the pictures of that message. And so for each of those pictures, right? So each of the pictures, we need to actually need to declare the variable just to be better there. So we'll say for const, pick of pics, right? So we're gonna make a new variable called pic looping through each one of these that came back from this array, right? So, for all of the messages, for all of the pictures in the messages, now what we're gonna do is we're gonna add that to this gallery. So this is an empty array, but we're gonna dynamically add to it. And the way that you add to an array of course is with gallery dot push, we're gonna push a value onto the end of that array. And we know what this is supposed to look like, right? It looks like this, it looks, we have this source, right? So source here, SRC is short for source just from forever in the internet. So image source, SRC and I know from my notes, and I'm gonna pop over here real quick. That this has, the media resource has this thing called a URI on it and it's relative to this https.twilio.com. So let's paste that. So it's relative to that, which means I that if I'm going to display it, I need to let our people know I'm gonna give it a full URL, which it requires, right? It requires this full URL. So it's got the front part of it. And then I'm going to use the pic as a property called URI, which we saw. And remember what happens is it has this content type if we want to without an extension, the media is returned. Now I know that by default this is going to give me this pic.URI is going to end in dot JSON. So I wanna replace that, I'm gonna use the string method to replace the dot JSON, right? I don't want that dot JSON, I want it to be no extension at all. So I'm gonna use this empty string. So I'm gonna replace the end of what this pick was with dot JSON. I'm gonna replace that with an empty string, which will remove it essentially, right? That's what we're gonna to do. Now I'm gonna do a comma 'cause I want to do more, I want to have the description. We wanna put the description here as required because that's what the little text is at the bottom that it says, and that's whatever they texted in, in their message, right? So I'm in this loop, I'm looping through each one of the pics, but I'm also, I have access to this message 'cause I'm in this inner loop here, right? So I still have access to the outer loop, which is message dot body, right? So those are inflated. So that's whatever the text was that somebody sent it in. And we should also, we'll make that the alt text too. So alt tags are handy for accessibility reasons. There are people, you might not think about this, but there are people who are going to use your application that are using it without being able to see, some people are vision impaired and they have screen readers and alt tags are awesome for that. You always wanna make sure that you make things accessible for people who can't see what it is that you're providing. And alt tags are an excellent way of doing that. This is just one way that you can make your application more accessible and everybody wins by it and then finally, I'm just gonna grab this last thumbnail width here, 200 pixels. We can see later if people want something different than that, what to do. So, our gallery array for each one of those pictures, it's gonna add to it, right? So it's gonna go and it's gonna add each one of those and we're still gonna return that gallery. And I think y'all, I think we got it. Let's walk it one more time. Okay. So we're gonna come in here and we are going to use the context that was passed in to this function when it was called. So when somebody hits this URL, this function is gonna run and it's gonna know it's gonna have access to those environment variables that we saw. It's gonna get access to an authenticated client and that client is logged in with my account SID and my Auth token. And we're gonna create an empty array, this gallery thing here, we're gonna create an empty array. It's a list that we're going to populate. We're gonna take our messages and we're going to push them into this array so that it has the format that is expected, which is right here. We're gonna turn what our messages look like into this so that later if we can use them that way. So the way that we do that is we use this client, this client is a REST client and it's gonna hit the messages endpoint and we know that it's going to do a get, but it's been abstracted for us. So just, we're just say, hey, list all of the numbers that were sent to this Twilio number and those are, this context here, again, this is passed in and the Twilio number is set in my environment variables over here. So we're set 'cause because you could have multiple, right? You could have multiple Twilio phone numbers. So we wanna say only the ones that were sent to. So we're very, we're being very specific. We're querying messages that were sent to this number, not from this number but to this number. And we're gonna loop through each one of those messages. And for each one of those messages, the object that's returned from this has this property called media, which lets us get to a sub resource. And you'll remember in the JSON, there's a link to this and we could go and query this ourselves, but we don't need to because the API has wrapped up for us. It's very nice, it's nice, nice abstraction. And we're going to get the list of those picks. And again, this is asynchronous. We're using this, we're waiting for it to come back, we're waiting for these values to come back. So once we have these picks, we're gonna loop through each of the pick and we are going to push out a source that has this. We know that they all need to start with API twilio.com because the URI itself, this URI here is relative meaning it doesn't contain the forward slash of this. So we are going say this is where it lives. This is the API call that we want you to do to get this content is API twilio.com, whatever is in the pick URI 'cause that's unique to each one of the pictures. And that URI comes with a JSON at the end of it. So if you look here, let's see if we look here, we can see that it ends in this dot JSON, right? And we want to get rid of that 'cause when you do get rid of it, what happens is it returns the actual picture. We did that, I don't know if you remember that earlier, we did that. So, that will be removed and then we're gonna use the message and the message is coming from here, right? So the message for each of these messages, we're gonna get the message.body and the description and the alt tag for it, the alternate text we're going to set. And that's from that, this is the required for, remember this looks exactly like what happened here. So we are returning that here and it should return JSON. I'm going to save it. We are going to deploy it. We are going to cross our fingers because this, we are at that point where we hope that the code that we wrote works and if it didn't, it is okay, if it didn't work, we are gonna work through it. We might get an error, we might not understand exactly what that error is and we are gonna work through it. But I am going to save this and deploy it. Now, let's assume that I gave this out, I gave this out. So now if somebody hits this API, here we go. So that's what it was before. If we hit it, we should see burritos. We got it. So it says, "Look at this beautiful burrito." I texted that in. Wow. Look at the clarity of the burrito. Oh my gosh, you can see the rice in the burrito emoji. That's impressive. I didn't know that. Look at that cat. All right. So in fact let's go, let's go hit it with our, let's hit that same request I wrote before. It should be a little bit different now. It's coming across here and I want to look at the response and the response. I'm gonna go and I'm gonna grab this URL and make sure that it works. So the source, right, the source that came back here is, should be the picture of it. And if we look at it should see my beautiful burrito. Oh look at this thing, I believe that burritos, when they can stand up by themselves, that's the sign of a good burrito. Look at that burrito. I got that in Arizona. Oh man, and what we did with this code is actually pretty common, now in an app like the one that we're building, probably eventually what you're going to do is you're gonna store those photos that were submitted into a database, right? And you're gonna do that from this incoming message function. You're gonna get it, you're gonna store it if it's valid, if it's a valid picture, you don't wanna show pictures that aren't, you're gonna store it in a database and then you're going to format it for whatever your client is. You're gonna get that from a database. So maybe instead of coming back from this API, you're gonna come from a database API and you're gonna pull back your information and then you're gonna push it through. And that database is gonna be in its own format, but you're going to make it match whatever it is that you are trying to push out there. You're not gonna, it's not gonna look exactly like the message, right? I'm not gonna send back one of these messages and make my API look like that. I'm gonna shape the data. That's what that's called. I'm gonna shape my data in the way that I want to be used. And we came with the spec. This is the shape of the data. So we took the data and we shaped it, we formed it into what was expected. All these burritos are making me hungry. I think I'm gonna go fetch one from my favorite taco-ria. Now I'll make sure to snap a pic. You should get one too actually. You deserve it. You deserve a burrito and when we get back, we'll look at how to fetch this data that we just generated in our client app. So we've coded our external public API and it's ready to be consumed. Now our API uses an external API, Twilio, and we're going to need to use our web framework Views API to retrieve the data. And to do that we're gonna need to use the web API Fetch. See, APIs are everywhere. No wonder you came looking for this course. All right, let's make use of our server-based API and our client side application. All right, so just like I just consumed my burrito, we are going to consume that API that we just created. So if I scroll down here, remember we're passing in this gallery here and we scroll down here into this load images and this load images gets kicked off from the API of view, right? So view has these lifecycle APIs and when the things mounted, it's gonna call this load images. We're gonna come into load images and now we have some to-dos that we have already to done. So we are going to use the messaging API to use submitted photos. We did that, we did that in our API and then we are going to create a web-based API that matches this expected response. We also did that, didn't we? We did that. So let's get rid of that. All right, so here we go. So this has got a suggestion here of what to start doing here. So I'm gonna uncommon this. So we're gonna create a new response object and we are going to await and we are going to use Fetch and Fetch here is part of the web API that browsers must implement to do exactly what we're trying to do, right? We want to fetch data from our API. Now this happens to be on the same server. So we can use a relative link like this slash API here. We don't need to specify the server, right? It's assumed. So our API, we called that, right? We called it API/pics. So slash pics is what we are going to hit there. And you notice that it's using await because this is an async function. So Fetch returns a promise and it's going to return that response and that response has a method on it called JSON that will actually return the JSON representation of whatever came back. So what I'm gonna do is I'm gonna get rid of this gallery, this hard coded gallery that is gone and I am going to say REST await. We are going to await 'cause this method is also asynchronous, response dot JSON. So that's gonna get back whatever is in this response that came back. This response has all sorts of metadata about it, but we just want to get the data out of it. And that's by using this dot JSON. And because our API is JSON enabled, it's just gonna come out. All right, let's deploy it. I cannot stop. Oops, this is not unable to deploy 'cause I didn't save it. So I need to save it first. I cannot stop thinking about that burrito. It was so good. I submitted a selfie of myself and I texted it to my Twilio number and I got a reply back from my Twilio trial account, right? And it says thanks for submitting it. So if all goes well when we look here, I'll be able to show you the burrito that I texted to my number. So it's been deployed and I'm gonna come in here under this assets and I'm gonna copy this URL and I am going to paste it here and this view application is gonna go and it's gonna hit my API and it's gonna bring back some photos into this gallery and here it is. Look at the size of this thing. It was truly bigger than my head. So if we click that, we could go, we could see my other beautiful burrito there as well. Now let's look again back here at the client side of things and just take a look at how beautiful this is. It's just two lines and it's hitting our APIs and that's the power of this API. We were able to hit an API and get user submitted text messages, text photos, right? And it only took two lines and really it only took one line actually. You know, like if we could have like chained some stuff on top of this. Awesome, now one thing that I do wanna note is that there's no authentication at all to this API, right? I didn't supply any authentication information at all. It's open to everyone and that's kind of a good thing if you are working on a client side application, you don't wanna pass your keys around. Like I would not wanna put my Twilio keys here on this page because I don't know if you know this, but you can actually see everything that comes down. So I'm gonna view the source of this and you can see here's the source that we're looking at and if I hadn't used any sort of API keys, I would see them right here. You don't wanna leak your keys that way, check the notes for more information on how to get around this. But typically this is what you do is you write a server that then the server keeps track of all the keys and you connect to the server. But if you do need to provide some authentication locally on the client, there are ways to do that. Check the notes. But look at this, look at this. You did this, you have designed a new interface, a text messaging interface, right, a TMI. Well I hope this wasn't TMI or also known as too much information for you. You learned a whole lot about APIs and not just the web-based ones. You saw them in practice and you even built your own one. You really deserved that burrito. Awesome job. You've just built and consumed your own API. Now here's my question to you. Do you think that the API code that we wrote together should be considered RESTful? Well, why don't we take a look at our weathered scavenger hunt card. So it's definitely a client server architecture. Our client happens to be, in this case, a view application running in the browser and our server is a serverless node application. But any client could connect and use this. Statelessness. It's definitely stateless, right? We aren't requiring any prior knowledge about the client, cacheability. Well, at the moment we aren't providing any caching information, though we could, right? We could fairly easily pay attention to those headers coming in and we could respond appropriately. It would require us writing some additional code and thinking through some of the edge cases, but we could do it. Let's put that in the maybe column. Layered system. Yeah, for sure, right? In fact, it's a little layered already. Our API is calling another API, but our client doesn't need to know that, we can also add additional functionality and the contract wouldn't change. Code on demand. We haven't even talked about this one yet. And it's the only optional requirement. Basically this means that your API returns code that is runnable, like maybe it returns an embedable widget or some actual JavaScript code. This doesn't make any sense in our use case and that's totally okay. So we're gonna drop this one into the no column. So we're looking good so far. But here comes the doozy, uniform interface. So remember this one has four subsections, resource identification and requests, ruh row. Currently we are just representing all the messages as objects and absolutely no way to identify them. So we failed this sub requirement and therefore this is a no. But let's keep going through the rest of these, pun intended, sorry. Resource manipulation through representations. We definitely do not allow any sort of manipulation of the images so this is another fail. Self descriptive messages, we haven't gone over this yet, but by using headers we can tell that this is JSON. The message sent down has a type and it's clear that it should be JSON decoded to be used. Hypermedia as the engine of application state. And last but certainly not least, HATEOAS or HATEOAS, it's an often forgot about part of the RESTful constraint. And the idea here is that there are links to show off what more you could do with this and where you could find related resources, it provides URIs or links. And we did see this in both the Spotify and Twilio ones. However, ours doesn't provide links to other resources. So we don't have a RESTful API and that's okay, it's gonna suit our needs. It does look like we could get there pretty quickly if we wanted to. One thing I want you to gain from that exercise though is that you now have the ability to identify whether or not an API is RESTful and I hope that felt pretty good. We've now completed the scavenger hunt, we revealed all the constraints, and I hope most of those are pretty clear. Please don't feel like you need to memorize those. You can find those same constraints littered all over the internet. Now as a prize for finishing the constraint scavenger hunt, I've dropped links to my favorite REST API constraint documentation for you to lean on, should you need to. I've also included links to the Popular REST API frameworks that will help you design RESTful APIs. Make sure to check out the notes. You did it. You just completed a whirlwind introduction to APIs and I hope that you can see how much more power they can add to your programming journey. By looking at interfaces in general, I hope you're more comfortable with the idea of not fully understanding exactly how something is working, but still leaning on that abstraction to build your tools and applications. Do this all the time with physical object interfaces and APIs or application programming interfaces. They aren't all that different. I hope you enjoyed taking this course. I know I had a lot of fun making it. If you think someone you know might benefit from this course, please share it with them. I'd love to hear your feelings, your thoughts, your dreams. So I threw together a little something using a smattering of APIs to capture your feedback. If you've got the time, I'd love to have you answer a quick text-based survey, text "feedback" to the number on your screen. Well actually, you know what, if you want, you can also call and just leave me a message too. I use an API for that too. So please, please, please keep me posted on your journey and really, I can't wait to see what you build. Thanks again for hanging out and we'll see you real soon. (upbeat music)