Playing
01. Introduction and demo
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
So whether you are new to Inertia or you're just looking to learn a little bit more, in this course we're going to build a fully working uptime monitor with Laravel Inertia and Vue. In this part of course I'm going to guide you through exactly what this looks like
00:16
and we're going to go from start to finish building everything you see here. Okay so we're on our dashboard at the moment, I've already registered an account and we're going to go ahead and create a new site. So let's do that first of all. You can see we get this nice modal window here, we're going to be learning exactly how to build that in
00:34
and we're going to go ahead and give a domain here. So I'm actually going to use HTTPS here and of course I'm going to pick the CoCore site. Once we go and add this we get forwarded over to this site. We can switch between multiple sites as well so we're going to be building in the ability to have multiple sites, switch between them and always default to the last site that you viewed
00:54
as well which is really important. Now underneath this we can add a new endpoint so we can monitor lots of different pages or just the home page if we wanted to. We'll see all of these just here and we can also add in some notification channels. We've just got one here at the moment which is email but because we're going to be using Laravel notifications we also have the ability to add
01:15
SMS notifications, Slack notifications, pretty much anything that it supports. Okay so let's go ahead and add in a new endpoint. I'm going to add the home page first of all so we can choose an interval here which are predefined validated intervals that we can choose. We can't mess around with these, these are a PHP enum that are validated so I'm going to go ahead and just choose one minute
01:36
here and I'm going to add this endpoint. So you can see here that's instantly been added and we get this one minute frequency, the last check, the last status and we get an uptime percentage as well. Now that's probably already done the check behind the scenes so if I go ahead and just give this page a refresh you can see that we get the last check date, we get the last status which of course
01:57
is 200 you would hope and the uptime percentage as well. Now we can edit this so we can change the location, the frequency at any point. We can also click this to view a log of all of the checks that have been performed. Now we don't get a response body here unless there's an error just because we don't want to fill it out with too much data but if this does go down we will get
02:19
the response body back from the request logged here which we can click on and have a look at. We'll be looking at that in just a second. So I'm going to go ahead and just add in another endpoint here and just to kind of demonstrate how this works I'm going to go ahead and change the endpoint to a page that doesn't exist just to simulate the downtime that we would see here. So I'm going to
02:40
go ahead and edit pro and I'm just going to change this to nope just so we know that that doesn't exist. So I'm going to hit done and of course the check hasn't been performed immediately because we've got a frequency of one minute so I'm just going to hang around for a second and we'll be back in a second to see this fail. Just before we see it fail let's go ahead and add my email
03:01
address in here just so we actually get notified. We can add as many email addresses as we want here and we can also remove email addresses as well. So if you need to notify multiple people in your team then of course you'll want to go ahead and add the emails in there. Okay so I've just received an email in my local mail client here to tell me that nope went down. So it looks like cocos.com
03:22
slash nope is down. We'll email and let you know when it's recovered. So what this won't do is it won't send an email every single minute that we have a check here because that would get pretty annoying if that were the case and you were receiving an email every minute. Instead what we're actually going to see is only when it recovers will we receive an email and then if
03:43
it goes down again after that we will receive an email again and then so on and so forth. So just while we're hanging around for the checks to complete let's go ahead and click on this and you can see that we've got this 404 not found here and of course as I mentioned before we have the response body in here now with what we get back from here. So obviously you can see that we get
04:03
a 404 with everything in here that you would normally see on Cocos if we didn't have a page that existed. So that's what we get when we have an error. Of course you can change it up to always include the response body but it doesn't really make too much sense to include a response body for a successful request. And of course you can see that we've got a now got a 50% uptime here
04:24
because we had one successful request and one unsuccessful request. So the uptime for this page overall has now gone down to 50% and of course as more checks complete as one has just done now it's going to bump down even more. So what I'm going to do is just edit this and change this back to pro. Of course this just doesn't really demonstrate much but we don't have any option here
04:46
because I'm not going to take any pages down on the Cocos website and if we wait over in our email client we'll eventually get an email through to tell us that this page has now recovered. So let's just hang around for about a minute to wait for that to come through. Okay there we go although this doesn't make sense with the endpoint name changes you can see that we now get an email
05:09
saying pro has recovered and we can just quickly click through to view our dashboard if we need to and that will redirect us over to the correct site as well. So that's now recovered and we're back to 50% uptime for that particular endpoint. So you can add as many endpoints as you want here they'll all be checked using Laravel queues. We'll queue the emails up as well so everything's nice and
05:30
quick and of course as we've already seen we can add as many emails to this notification channel as we want and we can also remove them as well. So let's just very quickly demonstrate that so if I want to get rid of Mabel that just goes and she will no longer be notified. So let's go ahead and just very quickly look at site switching so I'm going to go ahead and add in another site in here
05:53
click add and we're straight onto this and we can go ahead and switch between the two projects as well here and we can also delete sites so very very simple but down here we just get a confirmation that we can go ahead and delete the site and we're forwarded back to the currently available site. So there we go looks pretty simple but behind the scenes there's quite a lot going on here quite a
06:13
few things we need to think about and of course if you're new to Inertia this is going to allow you to set up a project in Laravel and get used to how Inertia works. If you're already working with Inertia we're going to look at some tips like inline editing and other bits and bobs like that. Okay so let's head over to the next part get things set up and we can build this from scratch.
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!