And here is my API key. And of course, I'll have to regenerate that after recording the video. But that's fair. Okay, so back to Sublime. Let's go into my .env file, and let's store this. We'll call it SimplecastKey and save that. Next, I'm going to go into config, services, and I'm going to add a setting for that. Simplecast. And our key will be environment SimplecastKey. Okay, great.

And our key will be environment Simplecast Key. Okay, great. So now I can easily access that value by saying config('services.simplecast.key'). Next, I want to set up a controller. So we'll say make:controller, and I'm going to call this MyPodcastController. All right, let's open that up. We can get rid of these two here. And the index method will fetch all of the podcasts, right? So ultimately, we will return a view that will be something like podcast.index. But I do know that we'll have to fetch the feed, right?

So ultimately, we will return a view that will be something like podcast.index. But I do know that we'll have to fetch the feed, right? So at some point, we're going to have to run an API call so that I can pass this through. Okay, we'll get there. Let's create the view. resources/views/podcast/index.blade.php. And I'm just going to scoop in a bunch of HTML here. We'll say that layer casts snippet. And now let's go to my routes/web.php file. I'm using Laravel 5.3 here.

And now let's go to my routes/web.php file. I'm using Laravel 5.3 here. Anyways, when you visit /podcast, we're going to load PodcastController at index. And let's view this in Chrome. So simplecast.dev/podcast. And there we go. We have our site. Okay, let's switch back to Sublime now and into my controller. So yeah, we're going to need to do something like fetchFeed. And these are the situations where you could delegate to like a service class or some dedicated class for this.

So yeah, we're going to need to do something like fetchFeed. And these are the situations where you could delegate to like a service class or some dedicated class for this. But I generally don't reach for that immediately. Instead, I will do the simplest possible implementation even if it's in the controller. And I will only extract if it feels kind of gross. And usually you can detect that when it's like, I don't really want this here. I'm going to extract a class. And that way I can reuse it somewhere else if I need to fetch a feed. Anyways, so in that case, we're just going to do fetchFeed here. And let's think of the steps.

Anyways, so in that case, we're just going to do fetchFeed here. And let's think of the steps. Make an API request to simplecast to fetch our feed. Next, I want to cache the response. And you always want to do this. It's a big mistake I see a lot of newcomers make. They will do something like this where they perform the API call. They get the results. They pass it to their view. And they're done.

So there's absolutely no reason to fetch this every page load. So we will cache it. Now, if we go to our .env file, the default cache driver is file. For production, you'd probably want to use something like Redis or Memcached or whatever you want there. Okay, so why don't we get started? How do we perform an API request? Well, we're going to use Guzzle, which is not my favorite, but it's sort of the industry standard right now. So we're going to pull that in. composer require.

Composer. require Guzzle. Http. Slash Guzzle. Great. So back to Sublime. We can import that at the top. Use Guzzle. Http.

Use Guzzle. HTTP. Client. And I usually alias that as Guzzle. Okay, so now we have some magic methods we can use here. For example, I could say once we import it, get me the Guzzle dependency. And we're going to make a GET request to whatever the endpoint is. We'll have to figure that out. But then I want the JSON response. And in the past, with Guzzle, you could just do this, which was really great.

But then I want the JSON response. And in the past, with Guzzle, you could just do this, which was really great. But they changed it up, unfortunately. It doesn't make much sense to me. But you'd have to get the body, and then you have to json_decode it just to get the JSON response, which is a little sad in my mind because 99% of the time this is what folks want to do. Just give me the JSON from this API call. But you have to do this. Anyways, that's okay. So we do have the JSON at this point, or I'm going to call this feed.

Anyways, that's okay. So we do have the JSON at this point, or I'm going to call this feed. But next we need to cache the response. So why don't we import the Cache facade at the top. And then we could say here cache, and let's say remember for 60 minutes times 24 hours in a day times 7 days in a week. Maybe it clears once a week or whatever interval you want to do. We'll set the key to podcast. And now if it's not in the cache, we're going to trigger this and return the result. Okay, so that takes care of these two bullet points. Make an API request to SimpleCast.

Okay, so that takes care of these two bullet points. Make an API request to SimpleCast. And again, we know we're going to have to figure out what the endpoint is in a minute. But then once we have it, we wrap it in a cache call to ensure that we're not hitting SimpleCast servers over and over. Okay, let's inject our GUSL dependency now. I'm going to use a macro here to accept GUSL. And we're going to use Laravel's automatic resolution to import that for us into the controller. Next, yeah, we got to figure out what the endpoint should be. So we're going to review their documentation here. Let's go to documentation.

So we can add it as an HTTP header. Or why don't we keep it simple and just pass it through as a request parameter or as a query string. Okay, so let's go back to Sublime. And I'm going to paste that in. And then we have to update this with the podcastId. I think we can find that if I switch back. Yeah, this is my podcastId. So I will paste that in. And then we also want to give it our API key. And then concatenate config('services.simplecast.key').

And then we also want to give it our API key. And then concatenate config('services.simplecast.key'). Yeah, that looks good. All right, so we will return the results of that. That has saved the feed. And why don't we start by just returning that and seeing what we get here. And there we go. We have the JSON response where each item appears to be a podcast that has things like the title, the description, basically everything I would need here. Even the audio URL if I want to embed that within a <audio> tag.

Okay, we're going to keep this up so that we can refer back to it. So I will open this in a new tab. And here we go. We have all my episodes that have been cached, so this should load very quickly. But it does seem like it's making that call. In my PodcastController, cache()->remember, yep, sorry. The key always comes first. Okay, so now first time will be cached and all of the future requests, yeah, really, really fast. And this is what you want to do. For any kind of API query like this, you want to cache it for as long as humanly possible.

Now to finish up, we would also want the duration. So what we could do here with like in a span, give it a class of is-muted. And then this would be podcast duration. And I believe that's going to be in seconds. So come back and give that a refresh. Yeah, so that is 687 seconds. What we could also do is wrap that in a call to gmdate. And the format we want is the minutes with a leading zero and then the seconds. And we'll pass in that. Okay, back to Chrome.

And we'll pass in that. Okay, back to Chrome. And there we go. We formatted it. We could even use Flexbox for this too. That would be kind of cool. Like we could say div. I think there's a class called is-flex that Bulma provides. That just sets the display to Flexbox. And then we would need to wrap all of these.

That just sets the display to Flexbox. And then we would need to wrap all of these. All right, refresh. Okay, that's activated. So then you could take one item and you could say Flex1. And that will push it all the way to the other end, which is cool. Now I'm not sure if there's a helper for that. So let's just cheat and throw it in here real quick. Flex would be Flex1. Okay, so now, yeah, we could say for all of our anchor tags,

Flex would be Flex1. Okay, so now, yeah, we could say for all of our anchor tags, we're going to have that one take up or flex to take up as much space as it can, like so. Okay, so that mostly should do it. And you know what? Here I think the anchor tag can go within here. Yeah. And then this can just have class flex, and that cleans it up just a little bit. All right, back, and yeah, there we go.