This episode is for members only

Sign up to access "Build An Uptime Monitor with Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
14. Normalizing the endpoint location

Episodes

0%
Your progress
  • Total: 4h 59m
  • Played: 0m
  • Remaining: 4h 59m
Join or sign in to track your progress

Transcript

00:00
The last thing that we need to cover when we're storing an endpoint is the normalization of this data. Now, what I mean by that is I can, for example, store an endpoint like this, abc equals true, and I could do something like that.
00:14
Let's go ahead and hit add, and sure enough, if we go over to the database, it has stored that location like that. That's not really what we want to happen. Now, there's a couple of ways that we can approach this.
00:25
We could, when we're validating, tack on the domain in front of this, and then validate it as a URL. Or we could just choose how to normalize this data. There's loads of different ways you could do that.
00:37
You could put in a package. But we're going to do some very simple, basic normalization of this data to trim off things like this and any excess characters at the end. It's not going to be perfect, but you can improve on it as you need.
00:50
And of course, there's no harm in storing something like this because the request to this endpoint is, of course, just going to fail. So let's get rid of this from the database, and let's head over to our endpoint observer.
01:03
Because when we create the endpoint, we want to normalize this data before it goes into the database. So with our site, what we did is we parsed the URL using the native parse URL function in PHP.
01:18
And that's exactly what we're going to do here. So we're going to go ahead and grab the endpoint. We're going to grab the site here. And then we're going to grab the URL for this.
01:27
Now, we don't actually have a neat way to do this at the moment. If we come over to our site model, and we refer back to the database really quickly, we know that we've got a scheme and a domain.
01:37
We don't actually have two of them pieces put together at the moment. So what we're going to do in our site is we're going to add a little handy URL function that just pieces these two things together. So all this is going to do is return this scheme
01:52
and we're going to obviously put on colon forward slash forward slash and this domain. So that's going to give us the full URL for the site that we're referencing. So let's go ahead and do that now. So then what we're going to do is do a forward slash here.
02:07
And we're going to put on the endpoint location that we've chosen. So let's just die dump on that just to see what we get when we go ahead and pass this through. So I'm going to go and just actually switch over to CoCourse.
02:20
And we're going to do slash pro. And that's what we get. Now for the path, there are two forward slashes, which is absolutely fine because a user could either add pro or they could add slash pro.
02:32
What we're going to do is take care of trimming that all off. So we have a nice normalized endpoint. So to do this, what we're going to do is reassign the endpoint location to always have a forward slash in front of it.
02:47
And then we're going to start by trimming any additional forward slashes off of the path. Now obviously, this isn't going to deal with things like backslashes. But again, we're kind of relying on the user to input sensible data, which may or may not be a good idea.
03:01
But you can improve on this if you need to. So we're going to go ahead and trim off the path from this parse data. So I'm going to use the Laravel array helper to do this just to get this data out a little bit more conveniently.
03:15
And we're going to go ahead and grab the path from this. And we're going to trim off any additional forward slashes. Let's go ahead and just die dump on the endpoint location really quick. And let's see what we get.
03:28
So I'm going to do slash pro. We get slash pro. And then I'm going to do pro. And we get slash pro.
03:36
So that's kind of normalized that depending on or regardless of how we have entered that data, which is really good. Now as part of parsing the entire URL, what we also get from this is the query string itself.
03:51
So for example, if I do pro plan equals monthly, for example, and I hit add and we actually dump out the parse data. Let's do that now. You'll see if we just try that again.
04:07
So pro plan equals monthly. You can see that as part of this, we get the query in here anyway. So that's really useful because then we can just piece together this by the parse URL within PHP.
04:21
That's why this parse URL function is so handy. So what we can do now is at the end of this, we can add in the query string and then add in from the parse URL the query on top of that.
04:38
So let's just go ahead and see what we get when we die dump this endpoint location now. So I'm going to go ahead and say pro plan equals monthly. And I'm going to go ahead and copy and paste this for later. And there we go.
04:51
So we've got this URL here. Now what happens if we have, say, an extra question mark on the end? Well, that's going to come up here and the request probably would go through OK. And we might have other data on here as well.
05:03
But just to be safe, we probably want to go ahead and do a right trim or even just a trim on this overall and get rid of any question marks at the end. So let's just try this out. There we go.
05:18
We could try something a little bit different like plan equals monthly and true equals false just to test this out. And there we go. So that's looking OK.
05:31
Obviously, it doesn't completely validate this properly. We can go back and change this a little bit later. But a little bit of normalization here really helps. So let's go ahead and store an endpoint for this.
05:43
Let's do pro and let's do forward slash. And let's head over to the database. And under our endpoints, they are now stored. We're going to get rid of it for this.
05:54
And we're going to focus solely on this code course domain. OK, there we go. A little bit of normalization. We may come back to this later to improve on this.
44 episodes4 hrs 59 mins

Overview

Ready to dive into Inertia? Let's build a real-world app with Laravel, Inertia and Vue! If you're already working with Inertia, you'll pick up some tips and techniques for future projects.

This uptime monitor allows you to create and switch between sites, then add endpoints to monitor with frequency intervals. Using the power of scheduling and queues, it'll automatically alert the email addresses you've added via the UI when an endpoint goes down.

In this course, you'll learn to:

  • Build a real app from scratch with Inertia
  • Work with Laravel queues
  • Perform actions on models at user-defined intervals
  • Work with sub-minute schedules in Laravel
  • Send out channel notifications with Laravel
  • Use API resources to simplify Inertia data
  • Organise apps with events and observers
  • Create modals in Vue
  • Perform inline editing with Inertia forms
Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!