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
03. Site and dashboard setup
Episodes
01. Introduction
02. Sites
03. Endpoints
09. Setting up endpoints
4m 23s
0%
10. Enum endpoint frequencies
3m 50s
0%
11. Creating the endpoint form
12m 58s
0%
12. Storing an endpoint
7m 21s
0%
13. Validating and authorizing endpoint stores
7m 6s
0%
14. Normalizing the endpoint location
6m 4s
0%
15. Displaying endpoints
6m 22s
0%
16. Deleting endpoints
6m 21s
0%
17. Toggling inline editing for endpoints
5m 12s
0%
18. Applying a watcher to the endpoint form
5m 31s
0%
19. Storing endpoint edits
8m 56s
0%
04. Checking endpoints
20. Determining endpoints to check
2m 57s
0%
21. Creating a job to perform a check
3m 21s
0%
22. Making an HTTP request
3m 39s
0%
23. Scheduling checks every second
4m 27s
0%
24. Setting up the check relationship
3m 14s
0%
25. Updating the job
2m 10s
0%
26. Showing the last status
12m 50s
0%
27. Expanded list of checks
14m 10s
0%
28. The response body modal
2m 49s
0%
29. Authorizing the endpoint details
2m 27s
0%
30. Calculating uptime for endpoints
8m 29s
0%
06. Email notifications
07. Downtime notifications
Transcript
00:00
We're going to dive straight into building out sites here. And of course, for this, we're going to need a model. So let's start by generating out a model in here.
00:08
And of course, we're going to call that site. We're going to use the M flag as well to generate a migration alongside of this. So let's go ahead and open up the Create Sites Table
00:18
Migration. And let's fill in some of the information that we would expect to see within a site. So the first thing is this needs to belong to a user.
00:26
So we're going to set up a foreign ID here. And we're going to constrain this. And that will be the user that has created the site. And that will be the user that I've currently logged in as.
00:36
The next thing is going to be a scheme. So we're going to store this as HTTPS, for example, or HTTP. And we're going to split this up when it's created. And we'll take a look at how we do that later with observers.
00:48
So we're also going to have a domain, which is going to allow us to access the domain really easily, like codecourse.com. And that will also serve as the display as well.
00:57
So that's why we're storing the scheme and the domain separately. Of course, later, you might want to give this some sort of title so you can actually name it completely
01:06
differently to the domain and scheme if you wanted to. Now, really importantly, we're also going to set up a Boolean here, whether this is the default site, the current default site.
01:16
And that's going to happen when we eventually set up our dashboard to allow an ID to be passed in. Of course, that's not working at the moment. But when we land on our app for the first time
01:26
or the last time we used it, we want to be able to see the last site that we viewed. Now, I'm going to set a default in here of false or zero because we don't want a newly created site
01:36
to be the default initially. We're going to handle all of the updates for that in the back. So that's pretty much all the information we need for a site. So we're going to go ahead and migrate these changes.
01:48
And we're going to head straight over to the site model and just do a little bit of a setup here. The first thing that we're going to do is the fillable properties.
01:56
Or we're going to unguard this. It's really up to you. So default, domain, the scheme. And that's pretty much it for now.
02:07
Now, we're also going to set up a relationship here. So let's go ahead and say that this belongs to a user. So return, this belongs to, and of course, that belongs to a user just in case
02:19
we need to access that relationship at any point. And I think that's just about everything we need for now. What we're going to do just to finish this episode off is we're going to head over to our web routes.
02:31
And we're going to change this dashboard route here over to a controller. We're going to pass down a site just so we can see how we would handle this with inertia.
02:41
And then we can add to this a little bit later on. So let's go ahead and create out a controller here for our dashboard. So let's make a dashboard controller.
02:51
And we can pretty much just switch this over so it works in exactly the same way. So I'm going to go ahead and get rid of this closure just inside of here.
03:01
And we're going to go ahead and reference our dashboard controller and the fully qualified namespace to that. So over in our dashboard controller, let's go ahead and set this to just have an invocable method.
03:15
And we're going to go ahead and return. And I don't really like using the inertia class here. I much prefer using the inertia helper. It works in exactly the same way.
03:24
So feel free to use either. But we can just switch that out. So I'm going to call render. And I'm going to pass dashboard down.
03:31
And we should, if we come over, see exactly the same thing here. So it works in exactly the same way. OK, so we're going to lastly look
03:39
at what happens when we pass data down to our view. Obviously, in Blade, what we do is we just pass this data down. And we can access it like a normal PHP variable. But what happens now we're using view templates
03:53
and we're rendering this out in view? Well, it works pretty much in the same way, except that the page component that we get, e.g. the dashboard, receives in props with that data.
04:04
So just as an example, let's go ahead and pass down a plain text greeting and just write hello. Now, nothing's changed over here yet because we're not accessing this and outputting it.
04:15
But if we head over to our dashboard here, we want to go ahead and just output this greeting over here. Now, within view, we would usually take the name of a variable and just output it in a template.
04:27
At the moment, that's not going to work because this isn't being recognized anywhere within this view component. For that, we use props. So what we're going to do is within the script section,
04:37
we're going to define out the props that we expect to receive into this component, which, of course, come from here. So we're going to define the props.
04:47
And we're going to define that we get a greeting passed down here. And we're also going to pass down the type of this thing that we're getting down.
04:55
In this case, it's going to be a string. When we get to passing down API resources, these are going to be objects. So we can switch this out a little bit later.
05:04
So we're now telling our component that we want a greeting. And this is a string. And if we come over here, sure enough, we're actually getting that greeting.
05:12
So pretty much works like you would standard expect within a Blade template. It's just very slightly different because, of course, now we're working with JavaScript.
05:22
So let's just create a site out in the database just to demonstrate this. And then, of course, we'll go ahead and pass it down to our template.
05:29
So I'm going to go ahead and say a scheme of HTTPS. And we're going to say codecourse.com. We'll set this as a default of just false. And we'll pop in a created at and updated at date in there.
05:41
And let's save that out. So we've got a site with an ID of 1. Let's just experiment passing this down from our dashboard controller.
05:48
So let's say site, which is going to be the case when we start allowing a site to be passed in. And let's just go ahead and say site find 1.
05:55
That's pretty much all we need to do. Obviously, make sure we pull in the namespace for the model just up here. OK, so now that we've done that, of course,
06:03
this is going to change to site. And what we're now going to see is an object because this is now a PHP class. This will be received in as an object.
06:12
And we can go ahead and just dump this out down here where we use the greeting. So if we give that a refresh, there we go. We have all of the information from that Laravel model
06:22
in an object. So we can access any of these properties like normal. So for example, if we wanted to access the domain, we could do that.
06:29
And we get codecourse.com and so on and so forth. Now, what we're not going to be doing in the course is just passing down collections. For example, if we wanted to grab all sites,
06:39
this is a Laravel collection, which will be passed in if we look at this and change this over to an array, that is going to give us what we would expect.
06:53
So let's just have a look. We've got an array now of all of the sites that are contained within our database. But that's not what we're going to do.
07:00
What we're actually going to end up doing is using Laravel API resources to pass this down. And that's going to give us a much more structured data set to work with.
07:11
If you think about this, what we're technically doing from this component is almost accessing API-like data from our application. So it makes sense not just to dump all of this information
07:22
out. And this goes for any inertia app you build. It's always a good idea to have some sort of structure rather than just passing down the entire model.
07:30
If we were to do that, we would have to go in and do things like we have on the user model, which is, if we come down, set things that need to be hidden. We would have to create accesses.
07:40
And it slowly gets really cumbersome to build out an application this way. OK, so now we've passed down a site just to demonstrate this. Let's finish up by just going over to our web routes
07:52
and accepting in an optional site in here. We don't always want a site to be passed in. So we're going to make this optional. To do this, we simply add a question mark on the end of
08:04
here, and that means that we will be able to access our dashboard like normal, but we can also pass the ID of a site down. Remember, a user is going to land on the dashboard
08:13
and see their default site. But if they navigate over to an ID, they'll see the information for that site. So that needs to be passed into our dashboard controller.
08:22
So we can pass this into invoke just inside of here. And we can also bring in the request, because we're probably going to need that at some point. We'll finish by just swapping over that to the site
08:34
that we have selected. So in this case, if we do site one, we get the information about site one. If we choose any other site, we get a 404,
08:42
because of course that ID doesn't exist. And eventually, when we go over to our dashboard, we want to see the default site. At the moment, we just have an array in there.
08:50
So there we go. We are pretty much set up with our dashboard now. Next thing we want to look at is how we can switch between sites.
44 episodes•4 hrs 59 mins•2 years ago
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
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!