Okay, let's start pulling in information from our APIs. So we'll do everything in Laravel to start and see how far we can get. So head over to the OpenWeather API, and you can grab an API key here. So I'm going to copy this. And let's go into the documentation, I believe it's in Getting Started, Documentation, and Current Weather. And you can see how to make a query here. So as you see, we need a city name and an app ID. So let's grab this. And you can also do it by latitude and longitude, which is probably more precise.

So let's grab this. And you can also do it by latitude and longitude, which is probably more precise. But in our case, cityName is fine. So I'm going to open my REST client here. And let's try this out. So we'll make a new request. It's a GET request. I'm going to paste this in. And I'm just going to hard code Toronto here. And the app ID is my appKey I copied.

And I'm just going to hard code Toronto here. And the appId is my appKey I copied. Okay. Let's see if we get anything. Oh, sorry, that was a title. So let me grab this and just say weather. And paste that in. Okay, let's try this. So there we go. We see information for the weather in Toronto.

Okay, so I believe this list should be a size of five, and it is. So these are the entries for the future weather. And again, we want it in metric. So let's see. Yeah, it's in Kelvin again. So and units equals metric. Okay. So let's see if we can get this information inside Laravel back to our code. So I'm going to my routes file, and let's just play around in here. So I'm going to make a variable for location because this is going to be dynamic later.

So I'm going to my routes file, and let's just play around in here. So I'm going to make a variable for location because this is going to be dynamic later on. So I'll just hard code it. And let's use the HTTP client. So I'll say $response equals HTTP, and it's a get request. And I'm going to use double quotes here so I can inline variables. And let's just grab one of the APIs here. Let's grab this one and just paste that in. And this one needs HTTPS at the beginning.

Let's grab this one and just paste that in. And this one needs HTTPS at the beginning. And I'm going to inline the variable here, just like this location. And let's also inline the API key. So I'll grab this, make a variable called API key. Let's put that up here, API key. And I'll put it in an environment variable in a second. And let's just see if we get anything. So I'm going to die and dump response, JSON. And let's see if this works back to our Laravel app.

So I'm going to die and dump $response, JSON. And let's see if this works back to our Laravel app. And it looks like it does work. Cool. So here is our information. And it is in degrees Celsius. Let's also grab the future weather. So let's make another variable here. Let's say $responseFuture. And let's grab the URL for that as well.

Let's say responseFuture. And let's grab the URL for that as well. I'll grab this. And I'm going to inline the variables as well. And let's see if this works. So let's dd(responseFuture->json()), OK? Let's see if we get anything here. And we do. And there are our next five days of weather forecasts. OK.

And there are our next five days of weather forecasts. OK. So now we can pass this into the view and output it there. So let's do that. So let's pass it into the welcome.blade.php, which we're using. And let's say current weather. And let's pass in response JSON. And let's pass in the future weather too. So response future. And let's say future weather.

So let's start with the current weather and the feels like weather. So that should be within main, I believe. Yeah. And feels like. So let's go into our code. And let's open welcome.blade.php. Actually, no, it's in, where is it? WeatherWidget. So this is the current weather. We can just output it like this.

OK. Let's see if we get. What was it? 30. 30 degrees. Undefined variable currentWeather. Oh, yeah. So I'm passing it in to the view in the welcome view, but I'm not passing it into the Blade components.

So I'm passing it in to the view in the welcome view, but I'm not passing it into the Blade components. So we have to do that. So say $currentWeather equals $currentWeather. And this should work, hopefully. We also need to define that in our class. So WeatherWidget right here. So we need a public property and these properties will automatically be passed into the view. So say $currentWeather. And I'm going to make one for $futureWeather right now because we're going to do that later.

So say current weather. And I'm going to make one for future weather right now because we're going to do that later on. OK. And let's make some params here, say currentWeather. And futureWeather. Actually, I'll just do one for now. And say this currentWeather equals currentWeather. OK. And now this hopefully should work.

This is just a simple explanation with no code.

And there we get the low effort sun icon here. So this image already has some padding around it. So I'm going to remove the padding that we added. So there you can see there's a lot of padding around the image. I believe this one, let's just put it to one or something. OK, that looks good to me. Now we can move on to the futureWeather here. So let's do that. So I think I'm passing it in already from the controller and I am. Let's pass it into the Blade component in our welcome.blade.php and say futureWeather equals

So I think I'm passing it in already from the controller and I am. Let's pass it into the Blade component in our welcome.blade.php and say $futureWeather equals $futureWeather. OK, and it's going to our class here. Make sure to add that. Remove this, put it here, and let's make sure to assign it. And let's change our dump so we can see what we're doing. So let's dump this instead, response $future. And let me remove this. And let's see if this works.

And let me remove this. And let's see if this works. OK, so here is our list of the five next days. So we can loop over this. And what do we need here? We need the day, the icon, the description and the high and the low. So this is a Unix timestamp. So we can use Carbon to grab the day from that. The icon is it's within weather, I think. Yeah.

Actually, I'm going to output the Unix timestamp for now, and then we'll format this in a second. Actually, what am I doing? We have to loop over this first. So I'm going to remove all of these other ones here. OK, and now we can foreach over this. So I'm going to do foreach. So I'm grabbing futureWeatherList as, let's say, weather. And let's put this after here. OK, and now we can start grabbing it. So this day is going to be the weather->dt.

OK, and now we can start grabbing it. So this day is going to be the weather DTO. And again, that's just the Unix timestamp for now. The icon is going to be the same as up here, but we want the small size. So I'm just going to grab this entire image and put it in here. And instead of current weather, we're looping over it. So the current loop is weather and we just want a small size. And the description is up here as well. So let's grab this whole thing, put it down here. And this should be weather as well.

So let's grab this whole thing, put it down here. And this should be weather as well. And for the high and the low, I'm going to grab this, grab the whole thing. And it's pasted in here. And this is going to be weather. And we don't need the temp. Actually, we do. temp. And this is the max or the high. And the low is the same thing, except it's min.

And this is the max or the high. And the low is the same thing, except it's min. OK, let's see if I did everything correctly. And it looks like I did. I have double Celsius here. So let's remove one of these. OK, now let's format the day here. So that would be this. So like I said, we'll use Carbon here and I want it to be uppercase. So I'll use strtoupper.

So like I said, we'll use Carbon here and I want it to be uppercase. So I'll use strToUpper. And we want to use Carbon in here. So \Carbon\Carbon::class. And to convert Unix timestamp to a Carbon instance, we can do createFromTimestamp. And this is the Unix timestamp. And then we want to format it to a day. And if I did that correctly, this should work. And it looks good. So in the next video, we'll take a look at making the location dynamic.

And it looks good. So in the next video, we'll take a look at making the location dynamic. For now, I'm just hard coding this location. And we'll make use of AlgoliaPlaces to make that happen. However, if this is all your app needs, you don't need to make the location dynamic and you just want to display the weather information. You don't even need JavaScript and you can just do everything on the back end. Oh, yeah, I forgot to move the API key to an environment variable. So let's quickly do that. So I'm going to grab this and it's a config/services.php.

So let's quickly do that. So I'm going to grab this and it's a config/services.php. open_weather.key. And it's going to config/services.php. And let's add a section for that. So I'm going to duplicate this. Let's say open_weather. And we just need the key. Let's make one for open_weather_key. open_weather_key, okay.

Let's make one for open weather key. openweather key, okay. And now let's go into our .env file. I'm not sure why in VS Code, you can't open the .env file from here. The first time you do it, it's kind of weird. So we have to use the mouse. So where is it? Right here. And it's openweather. Oh, I think it's one word.