00:00:02 To fetch the movies for our great mobile movie application, we'll use TMDB, a database of, I think, every movie that you can possibly think of.

00:00:11 This is their public-facing website, but they also have an API.

00:00:15 So if you Google for TMDB API getting started, or I'm going to also leave the link in the description, then you'll be able to find this getting started guide.

00:00:24 head over to the API reference and here you'll be able to give it a shot.

00:00:28 We'll be using Node.js to make the calls and you'll have to get your API key.

00:00:33 It'll ask you to log into your account or to create it if you haven't before.

00:00:38 So feel free to create your account.

00:00:40 as it is completely free.

00:00:41 You don't have to worry about paying anything and you'll get access to all the data.

00:00:45 Once you log in, you'll be able to see something like this, which is your account, and then head back over to the Getting Started guide and click the link

00:00:53 that says API link.

00:00:55 There we go.

00:00:56 Here you'll have your API read access token.

00:00:58 So copy it and save it somewhere.

00:01:00 And do the same thing for the API key.

00:01:02 Head over into the API reference.

00:01:04 And if you're logged in, you'll see that all of the credentials will be filled in alongside a demo request that you can try.

00:01:11 In this case, they're making a request to the authentication.

00:01:13 So if I click try it, you can see that it's exceeded.

00:01:16 In this case, we'll be using the endpoint for discovering movies.

00:01:21 So search for discover.

00:01:23 movie, and you'll quickly be able to find that movies is deprecated, but you should use discover movie instead.

00:01:31 And it tells you right here which API requests you have to call.

00:01:34 Find movies using over 30 filters and sort options.

00:01:37 And it tells you right here what you can pass over into it.

00:01:41 We can also give it a shot by clicking try it.

00:01:43 And then you get back the total number of pages, which is 49,000 pages that has almost 1 million movies.

00:01:53 And here, of course, you get more details for every single one out of those almost 1 million movies.

00:02:00 How cool is that?

00:02:02 Now let's actually try to call this within our code.

00:02:05 Let's go ahead and copy this entire fetch request by selecting it and then pressing control or command C and then heading back within our code.

00:02:13 We'll create a new folder that we'll use for the API configuration.

00:02:17 So let's create a new folder.

00:02:20 Let's call it services.

00:02:22 And within services, let's create a new file called API.ts.

00:02:27 Within it, for now, you can paste this request that we just copied, but comment it out.

00:02:33 We first want to set it up from scratch so it's fully reusable and more structured.

00:02:38 First things first, we need to extract this key that was given to you.

00:02:42 So if you head back to your credentials header, select it and copy it.

00:02:46 You can now store it in a more convenient place, such as a .env file.

00:02:52 This stands for environment variables and make sure that it is in the root of your directory.

00:02:57 I'll call it expo underscore public.

00:03:00 If you're going to use it on the front end side of your expo application, you have to prepend the name of your environment variable with expo public and

00:03:08 then say movie API key and paste your environment key.

00:03:13 Now we won't have to every time spell it out within our code for everybody to see, but we'll be able to just refer to this variable.

00:03:20 So instead of just making one single request, let's actually form a TMDB configuration that is reusable so we can actually change the way we interact with it.

00:03:30 We can call it for multiple different endpoints.

00:03:33 To do that, you can export const TMDB underscore config, and it'll be equal to a single object.

00:03:43 Within the object, we can first pass the base URL, like this.

00:03:48 And the base URL will be this starting part up to the part where the endpoint will actually change.

00:03:53 So sometimes it'll be discover, movie.

00:03:56 Sometimes it'll be my profile, for example.

00:03:59 But there's always a base URL that each API has.

00:04:03 So, https://api.themoviedb.org/.3 and leave out the last forward slash.

00:04:06 We don't need it here.

00:04:14 Next, we have to pass the API underscore key, which will be equal to process.env.expo underscore public underscore movie underscore API underscore key.

00:04:27 This is coming from our environment variables.

00:04:29 Next, we can pass the headers that we're making with the request, where we're going to pass the accept property to let it know what kind of data should

00:04:38 it accept.

00:04:39 And this will be equal to application.json.

00:04:42 And also we have to pass the authorization header, which is equal to a template string of bearer.

00:04:49 And then you once again, render the process.env that expo public movie API key.

00:04:54 We're not spelling it out like this.

00:04:57 Perfect.

00:04:57 So with that, we have basically utilized this entire part.

00:05:01 And the only thing that remains to be changed is the URL that we're calling.

00:05:05 So in this case, you can see we're looking for forward slash discover forward slash movie.

00:05:11 But now that we have this configuration object, it'll be super simple to create a function that just calls one endpoint.

00:05:17 Let me show you.

00:05:19 Export const fetch movies is equal to an asynchronous function that will accept a search query And we can open up a code block.

00:05:29 Now for this query, we also have to pass the type and we can say that the query is of a type string.

00:05:35 It'll look something like this.

00:05:37 Next, we have to define the endpoint that we're calling.

00:05:40 So I'll say const endpoint is equal to.

00:05:43 forward slash discover forward slash movie question mark sort by popularity descending.

00:05:50 So this will give us the most popular movies.

00:05:53 Then we have to get the response out of that call by saying const response is equal to await fetch.

00:06:01 We're going to fetch a specific endpoint with the following options.

00:06:06 I'll pass the method of get.

00:06:08 So we want to make a get call.

00:06:10 And I will also assign the headers to be equal to tmdbconfig.headers.

00:06:17 Finally, we'll check if the response is not okay.

00:06:23 So if not response, okay.

00:06:25 Then throw new error, failed to fetch movies.

00:06:28 And we can also cons log the response.statusText to see exactly what went wrong.

00:06:34 I'll suppress this TS warning right now because I assume there will be a response.statusText that might give us more info.

00:06:41 And then if everything is okay, we can extract the data from the response by saying cons data is equal to await response.json.

00:06:50 And finally, we just want to return the data.

00:06:53 dot results, which contains the actual movies, out from this function.

00:06:58 And this would be great.

00:06:59 I mean, this works amazingly well for just fetching the most popular movies.

00:07:04 You could say fetch popular movies and you would be good to go with this function.

00:07:08 but I want to teach you how to make it more modular, how to make it work both for fetching the popular movies, as well as to work for fetching the movies

00:07:18 that we search for.

00:07:19 So if a user heads over and clicks search right here, we actually want to use the same function, not create a duplicate one,

00:07:26 that'll fetch the movies based on the user's search query.

00:07:29 So what you can do is say that the endpoint is equal to And then if there is a query, so if query exists, then we can change the endpoint to be equal to

00:07:43 forward slash search, forward slash movie, question mark, query is equal to, and now here we can pass over the query like this.

00:07:53 But whenever you pass plain strings into a URL, it is always better to encode them, just to make sure that we don't have any weird characters that the

00:08:01 browser might not be able to process.

00:08:03 So you can write in code URI component and then pass the query into it.

00:08:10 This way we'll be sure that everything is good.

00:08:13 And then if we don't have the query, simply search for the latest movies.

00:08:17 Now, the final thing we need to do to make this work is also make the bottom one a template string.

00:08:22 Why?

00:08:23 Because for both of these, we actually want to add the TMDB underscore config dot base URL at the start of them.

00:08:32 So everything starts with this base URL, and then we're changing the exact endpoint depending on whether we have the query,

00:08:40 and if so, we pass it, or if not, give me all the most popular movies.

00:08:45 I think you can now understand a bit more detail of what I meant when I said that we're going to make this reusable and just better configured.

00:08:52 And it makes sense because the endpoint is different, but the actual data we're returning from the function is still the same.

00:08:59 They are movies.

00:09:01 So with that in mind, you have successfully created an account on TMDB, you extracted your own API key for free, and you made a function that fetches the movies,

00:09:12 either the most popular ones or the ones that match the user's query.

00:09:16 Very soon we'll put it to use.

00:09:18 But just before that, in the next lesson, I'll show you one more optimization that we can make to use the FetchMovies functions we created in a more optimized way.