Laravel Movie App - API Usage & HTTP Client - Part 2

what's up guys welcome back and in this video I'd like to grab movie information from the API we'll be making use of laravel sevens HTTP client so let's go ahead and get started so the first thing to do is get an API key so head over to the movie database website and it is free but you have to fill out a lot of information and initially I thought the process was approved manually by a person but it's actually automated and it's pretty much instantaneous after you fill out all the information so after you do just press API here and you'll see an API key and an API token so you can either use the key or the token so if you use the key you have to use it as a query string parameter if you use the token you can use it as a pair token in the header so I like using the token as it feels more secure to me so I'm not gonna go into it here because I don't want to show you my API key but just click API here and you'll see your keys so it's going to the documentation and there is a documentation site here and let's try one in our rest client so for our app there's one for popular movies so there's an endpoint for that if you go down here down to movies and get popular where is it right here it's slash movie slash popular so you go into my rest client here I have that here you can see the end point here so it's this end point slash three for version three and then move the movie popular and then make sure to add your bare token here and then let me show you a incorrect bear token okay but if you put in your correct one that should work awesome so here's all the information coming back you'll see there's ten thousand results and there's also pagination here but we only need whatever our design shows what we have like ten in our design yeah we have ten so we only need ten so let's go ahead and set this up in our laravel app so the first thing I'm going to do is make a controller so instead of using route view here I'm actually gonna make a controller so HBR is in make controller let's call it movies controller and make it resourceful okay and let's move this into there so route get so this would be slash and this will be movies controller and it's a b-movie stop index and it's do the same for the show method so it's gonna be two movies slash movie it's gonna be the show route or the show method it's called movie start show okay and we can get rid of these and let's go into that controller and it's add it here so let's just return the view for now and that should still work and I call the index and we're gonna pass in some data here but let's just make sure it still works okay so let's go ahead and make use of the HTTP client so let's make a new variable here called popular movies we want to grab the popular movies so we just use this HTTP facade and it's a get request to at endpoint so API movie DB org slash three slash movie slash popular and we want the JSON results so let me just put this on the line and say JSON okay and it's just dying dump that see what we get so we're not passing in the bear token so we should get some show some sort of error okay let's try sup I have to import the facade okay see what we get okay says invalid API key which is correct so let's pass that in there is a method we can chain on here called with token and that will pass in the bearer token as a header and we can put it in here but it's probably a good idea to store it in an environment variable so let's go ahead and do that so let me just put this on its own line and I'm gonna put it in a config variable first and from there we'll put it in a environment variable so services dot tmdb for a movie database and its name it token and we can also store like the base URL like an Axios there so this would be the base URL but I'm just gonna hard code it just for clarity so let's go to config services and it's ad 140 m DB let's just duplicate this tmdb and one for token that's all I need let's say the MDP token so let's add this in our environment file right here and I am going to paste with my token but I won't show you that okay so I pasted it in and now let's see forgetting anything here and we are cool so you can see there is a results array here which is what we're looking for and here are all the movies so each array is movie information here so I want the results key here so let's describe it directly okay and instead of dying and dumping I'm just gonna dump just so it continues and I can see what I'm doing here cool so now we just want to loop over these and render them in popular movies over here and we only want 10 movies here because that's what our design has or maybe I'll just keep all 20 20 it doesn't seem too bad or yeah there's certain 19 so there's 20 okay so let's pass that in to our view here so right here say popular movies it's popular movies okay and in our index played let's loop over them so indexed are played and we have to find where the popular movies are and it would be all of these so I have 10 of these so I don't need these anymore so I'm just gonna delete the rest of the 9 because we're gonna loop over them so I believe that I'm so I mean too late and there should be one left okay and now let's loop over it so I will duping over this whole empty eight they've supposed to do for each popular movies as popular movie and just move everything in there so that would be all of this let me just move this up and indent it cool and now we should get twenty movies even though I didn't do anything but it's looping over the entire array so 5 10 15 20 cool or if you want to just grab 10 you can turn this into a collection and just take 10 if you want it's up to you I'll just leave all 20 in there so now we can just start filling out this information so the title here will correspond to so each one of these will be a popular movie and there is a title field here so let's go ahead and change it so be popular movie title and we have to make use of the array syntax so usually if this were a eloquent model I would do the arrow syntax and say title but that's not gonna work it's just it's not an eloquent model so we need to use the array syntax title see if that works oops popular movies popular movies sorry movie movie yeah sorry actually I'm gonna change it to movie it's easier to read okay there we go now the titles are in place sorry that's the bottom one up here yep cool let's take a look at the rating and the release date what fields are there for that so there is a rating right here some fold average and then we have to multiply that by 10 and there is a release date here which we can use carbon to format that date so let's go ahead and do that so let's replace the rating here so we have movie vote average and we want to multiply that by 10 and add the percent sign okay okay and the release date is right here and it's gonna make use of carbon in line so let's do slash carbon - carbon parse we when the parsed movie release date and we want to format that to month day and here okay so if this is too messy for you if you don't like this in the view then you can extract this to a helper method and I usually do do that but to start I just leave it in here and then when I start repeating myself or if I feel it's messy then I extract it to a method okay it looks good now for the image so there's some stuff we have to look into in the documentation about the images so it's not this page I think it's in here so if you go into getting started there's subsection here for images and you'll see actually let me show you this first so if you look at the stuff coming back you'll see there is a section here for the poster path which is the file name which is half of what we want but there are different sizes so for the different sizes you have to grab the different sizes available in this configuration endpoint so let me just show you that let me go to my API sorry members client my rest client I mean and if we hit the config endpoint which you see here and you'll see the poster sizes for the images so I'm going to choose with 500 and here is the endpoint here and you can replace this with the different sizes here if you need bigger or smaller images so it's ready with 500 in here so I'm gonna grab this whole thing and let's go ahead and paste this into our code so instead of this I'll paste that in and instead of this this is gonna be the poster path so we can do dot movie and poster path okay it has changes to poster and see if this works back to our app refresh and looks good cool there are all the images okay now let's take a look at the genre genres here so if you look at what's coming back there is an array for your genres but it's only the IDs so you see the five genres and these are the IDs for each genre and there's another genre end point we can hit with IDs and the actual name of the genre so I kind of wish they just put it in here I mean the name as well so I don't have to go through that entire process but that's just how it is with REST API s and that's the advantage of using graph QL so let's do this quickly so if you go in here believe there is a genre end point right here and it's just genre movie list and it will just return all the genres do I have this my REST API so let me just make a new one here so movie genres let me just duplicate this movies genres okay and what was it genre movie list genre movie list okay and you'll see that it's not even a big list so we can just grab this locally and then compare it against the genre IDs so let me show you what I mean so let's go back to our movies controller here and it's pulled down that entire list of genres so I'm gonna name that genres array actually let me just copy this or duplicate this okay let's call it genres array and then what's it called what's the end point genre movie list genre movie list and what was the key let me check so it's a key of genres instead of results and this is just an array of all other genres so Bijan res so let me just dump this this is basically what you see in it the response in my rest client thought genres alright so I don't need this anymore okay let's refresh this and like I said you see what we have in our first client so we just have IDs and names for all the genres so this is every single genre so what I want is just an array with the keys of the IDs so instead of the standard indexes or indices I want the indices mapping to each ID so the first one will be 28 second one would be 12 and so on and then I can just reference these IDs with the genre IDs that are coming back from the popular movies array so I hope that makes sense so the first step like I said I just want these IDs to be the key so let's go ahead and do that first so I'm gonna make another array here it's going to be a label collection because I want to make use of one of its method so I'm gonna collect it Shawn rows array and I want to use the map with keys method and that does exactly what I just showed you I just want to grab a field and make that the key so let's grab the genre and let's do this okay and I want the key to be let's put this in the array so the key is gonna be Sonora ID and the value is going to be the name okay so now if I dump that and you'll see what I'm trying to do here genres so now we should have an array with the key of the ID and then the value of the name of that genre and now you see we're getting a collection back and our collection is exactly what we want cool so we can just pass that in like I said it's not a big list so it should be okay performance wise so let's just pass that in genres okay and in a dump up the popular movies again just to see what we're working with and now let's go back to our view here so index plate and where's that okay right here let's just loop over the genre IDs for now so this not this let me refresh this so this the genre IDs here so for each movie genre ID genre IDs sorry as a genre and it's just dump out the ID and that should just be a list of ID's here right here and that's what we want but since we passed in those genres then we can just do this so genres get a genre so yeah so much work just to get the genre displayed here correctly so that's when graph QL is more useful or if they just include it in the response and there it is so you want to add some commas there so let's do that so I'm gonna put an if statement here because we only want the commas if it's not the last iteration so let's do if and the condition is not loop last so if we're not on the last iteration of the loop then add a comma it's gonna put it in line here and just try not to put spaces here and that should do it and I have an error what's my air I forgot the dollar sign here okay and you can see the comments there and there seems to be an extra space so just get rid of this space here say that and I should do it it's cool okay now let's work on the next section here so the now playing section and pretty much gonna be the same as this but we just have to get the info for this now playing endpoint so if you look at the database back to movies there is a endpoint for now thing so it's just movie now playing so we can go back to our controller and grab that as well so let's grab now playing movies now playing movies and that would be movie / now pain okay and I believe the key is results as well and it's past that into now playing movies now today movies and let's dump that out here now playing movies okay see what we get and it's pretty much the same thing but now we have information for now playing movies if you look up here and you'll see information for now playing movies so we just have to do the same thing we did for the view and replace everything in here everything in now playing movies so let me just get rid of the rest of these 9 hard-coded ones because we are going to go into loop over them just like we did with the other section that would be this I believe and I think I believe it too many okay so there should only be one now cool so now these two look pretty much the same so if I did what I did here I would just be repeating code so what we can do here is either use a blade partial which has been available for a long time in blade so we would do something like include partials dot movie card or something like that and then we can even pass in data like this and that still works like I said but I would like to make use of blade components which is a new in laravel 7 so it's up to you what you want to use so I am going to do a PHP artisan and I believe it's called make connect controller make component I believe yeah right here and let's call it a movie card so PHP artist and make component movie card okay and that gives us two things it gives us a new components folder in our views folder and we have this movie card and it also gives us a class so app HTTP view and components and we have this movie card as well so this sort of acts like the controller specific to this component so this is where you would pass in data and then here is where you would render the view so if you had a simple component that didn't need data then you wouldn't need this class at all you can just use the view file it generates but we do have data we need to pass in so we can pass it in in this class so let's go back to our index view and let's get rid of all of this so let me just cut this and we're gonna put this in our component actually let me show you the syntax first so we can just do X - name of the component and you can pass in data as well but for now I won't pass in any data and now we can go to that component where is it movie card right here and it will render this out so let's just say hello from component okay and it's just refreshes and you can see the component rendering out here okay so let's paste in what we copied and let me just reinvent this okay let's go back to our index and I'm gonna pass in the data we need here so we need the movie so if the passing data it's similar to how you do it in view so we do movie but for variables we can just do dollar sign movie and we also need the genres that we passed in so that will be : genres and genres okay and now for our movie card we can pass in the data here so we won't accept a movie and genres and it's make public properties here and just like several components in nerville if you make a public property then it will be available in the view so let's go ahead and add movie and sad genres and let's accept them in the constructor here and that should be all so this movie is movie and this genres is genres okay so if I did everything correctly this should still work but now we have a component okay so everything still looks the same and now we can reuse that component in our now playing movies so we'd have to grab this and pass in the same thing and just loop over and now play movies instead of popular movies so let's do that so where is it here yeah we don't need this actually because we extracted it to a component let me paste that component in and it's grab the for each up here I'll just change change that so if it feels like I'm editing a lot just because my computer is really slow for some reason like whenever refresh my page it takes forever to reload so I'm just adding out how long it takes so sorry for that if it feels like it's over edited supposed to be now playing movies and that should do it are now playing movies should work and now we've extracted it to a blade component okay and as you see our now playing movies still works as well cool okay now let's work on the show view so I'm gonna click on this and I wanted to show the details page so let's go to that so it's going to our movie card actually do I have a role for that so movies movie movies controller show so let's go ahead and we turn the view here you turn the view show and let's go back to our component here and you have to add it in two places so I have the image that's a link and I have the title that's a link so let's do multiple cursors here and it's make a route helper and it's movies show and the parameter here is gonna be movie I believe there is a path or a ID sorry not path and ID yeah so that's all we're gonna be using so movie ID oops and that should go to it when we click it sorry there should be a string okay so if you click it that should go to a details page okay so that would be show played and this is huge I think I have a typo here and I do should be a space okay so let's just pass in actually we have to grab the movie detail so I'll go back to movies and just details so movie slash movie ID is the end point so let's go back to our movies controller and we're gonna do the same thing here just do this and just do a movie so let's just name this movie and it's gonna be slash movie slash ID so the idea is coming in the query string is to ID and there is no key here just result it just returns the array of results or array of keys that we need so that's fine and still what we did before and just dumped at the movie okay and it's passed that in here movie movie movie is movie oops okay cool and let's see what we get here okay and we can just start replacing this with this information up here so let's start with the image so the image is gonna be pretty much the same as what we have in here so let me just grab that where's it right here okay go back to show and space that hey see if that works and I think I spelled that wrong in my controller I did try again okay there's the image let's change the title so this would be movie title the title and these are pretty much the same as what we have in the components so let's grab the vote average or the rating put that in here right here and then we have the release date describe that and put that in here and we have the genres and for the genres I believe they do come back for the details page as the name so we can just loop over that so let's do that actually let me grab what I have in there and just change it because we have all this common stuff as well so this back to show and it's changed this so now it's just movies genres we have that as a key and we can just do a genre name here genre name okay and that should work awesome and this is the movie overview so right here so let's add that so right here it's just changes to movie overview overview okay and for this featured crew section let me just show you there's no information for that in this end point but there is another end point so if you look at the get credits end point this will return the cast here so the cast and the crew and we need the cast for the next section of actors as well so this section underneath so as to grab that so we can make another request to this end point with the movie ID but we can also sort of make it join here with our original end point if you look at this append to response section we can just add the append to response key I mean query string and then add the model we want to join so in this case we want the cast sorry the credits and you can do multiple as well so let's do that Panthers response so in our API call here and the movies controller that's append that so we're gonna do end and and it's gonna be cast in our case and now let me save this to if i refresh this you'll see we'll have a new section here called cast and we can just grab that information as needed sorry that didn't work because the query string should be a question mark and it should be an ampersand for other query string variables so try it again sorry again I should be credits and while I'm here I'm just gonna append the other ones to that we need so videos is needed for that trailer URL and images is needed for the images so now credits videos and images should appear here when i refresh the page and there it is cool credits videos and images so for credits you can use that for this section because the credits includes the crew and the cast so for this section right here I'm just gonna grab the first two and you'll see the different sections for them so you'll see the Department and the name or job whatever you want to use so let's go ahead and do that so go back to show so these are the two things we're looping over and we only want to show two of them so let's do that actually let me just delete this one okay and I'm gonna put the margin right on this one instead margin right of eight and it's Adly for each here so it's gonna be movies and the key is credits and those credits have crew and save that as crew yeah we can move this in there so let's put that in there okay and we only want two of them so let's do this we can do if we can do the loop index if it's less than two then we can just put that in there so it'll only show two results which is what we want and we just have to hope that the API shows the two most relevant results okay see it just works oh I got to change this so this will be crew name this will be crew job okay see if that works okay we have an error that should be movie okay okay and now you see the featured crew here cool okay now let's work on this play trailer button and I just want this to play the trailer on YouTube so if you look at the videos or Ray coming back you'll see that there is some results and if you go through them you'll see an ID for a YouTube video here so we can just link off to that YouTube video so if you go back here where's that button right here I'm gonna change this to an anchor tag so let's go change that changes as well and make this an href equals so it's gonna be HTTPS youtube.com slash watch question mark V equals and we can scrub the movie and videos results it's got the first one and there is a key called key there okay and some movies don't have this so we have to check if it's null or not so again sorry if this looks really laggy I'm trying to bare just trying to finish this video because my computer is really struggling right now some videos results so let's just check if this is greater than 0 so if there are results then you just grab this and if there isn't any results then don't render anything okay hopefully I didn't screw anything up because my computer takes like 30 seconds to refresh this page okay and that looks screwed up but let's see if there is a video and you see in the bottom right there is a video and that just links off to the YouTube video cool so I'm not we feel that the load I have confident said that works again my computer is not performing really well right now let's just indent this and let me change this to inline flex so it's inline okay cool so for the cast here similar to what we did here where we only wanted two results we can do the same thing for the cast here and if you look up here you'll see we can loop over the cast in here and there's 18 results for this but we only want the first 5 so let's quickly do that so the cache will be right here anything when I loop over is this so let's quickly do that for each so I'm just gonna grab what we did up here with the crew but now we want movie credits cast as cast right here cast just cast and we can move this in there so let's move that in okay but up and then get rid of this and I'm gonna start pasting stuff in because I can't type anymore my computer is way too slow so this is pretty much what we did for all the other images it's just a different size and the cast profile path is the image of that actor this is just going to be cast name and this is gonna be cast character so let's do that cast and for this it's gonna be cast character cast character okay fresh that okay and we only want five so we can do that same trick we did up there where we check every loop index so let's just do ups if loop index is less than five so that will only show five actually they should go in here inside the for each like this and we can end the if here just indent this it's in that this okay see if there's only five now okay and there is this is just a hard-coded one so let me get rid of that okay so let's delete that and now there should be only five cool and currently this doesn't go to anything yet maybe in the future we'll add an actor's page as well and the last thing I want to do is the images here so if you look up here we have in images and we want to make use of the backdrops and we just want to loop over these and to display them there so let's do that so these are the hard-coded images so I only need one so let's get rid of all these and I can sorry about this I'm just gonna paste off in because I just want to finish this video because my computer is a piece of crap okay so again same thing we're just checking the loop index as we only want to display 9 in this case and here is the thing we're looping over you can see that in the response in the API and and for each and for the image let me just paste that in as well it's pretty much the same thing as what we did above and I think you understand what I'm trying to do here and see if this works and there we go we have 9 images showing here so now we set the cleanup get rid of these dumps sorry movies control movies controller get rid of this I'll just leave it in there it's commented out and that's the index right yeah we have to get rid of it for show as well and that should be all for this video we successfully pulled from the movie database API and brought in the information for all the movies here so if we go back to the index actually we should link these two so let's link that up in our main that blade let's just do route movies index and it's do the same for the movies title as well right here route movies thought index okay and now these two should link to the main page so if I click this go back to the index page and there is the list of movies we're pulling from the API and we have popular movies and we have now playing movies as well so everything is looking good in the next video we'll take a look at testing the API to make sure everything works hopefully my computer is not acting up in that video please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one Kate thanks bye [Music]

Channel: Andre Madarang

Views: 37,225

Keywords: laravel http, http laravel, laravel http client, laravel movie app, laravel client, laravel zttp, laravel ajax, movie app laravel, andre madarang, drehimself, laravel tmdb, movie api, laravel api, laravel http api, tmdb api, laravel ajax calls, laravel 7 new features, laravel 7 http client, laravel 7 http, laravel 7 blade components, laravel blade component

Id: NrLV0WCQxkA

Length: 46min 7sec (2767 seconds)

Published: Fri Mar 27 2020