Realtime Pizza Order Tracker - Laravel, Vue & Pusher

what's up guys Andre here and today I wanted to show you how to implement real-time notifications using laravel view j/s and pusher now if you've ever ordered pizza online from dominos you'll see that they have a really cool order status tracker that updates in real time they have statuses from when you place your order all the way to when it's out for delivery I thought that was really cool and figured why not try to build something like that so here we have our application which is appropriately named pizza Bell I have my boilerplate code here and let me just go through what we have done already so we can log in and it takes us to the page where you can see all our orders we can also order pizza from the order page this plate is very minimal I didn't really have all the options for ordering a pizza like there's nothing like price here but I just wanted to get the point across so let's go ahead and Street and got some toppings in there instructions here and we can order a pizza and this redirects us to the view page and this is where the real-time notifications are going to happen so we'll have a progress bar here and we'll have a bunch of real-time notifications happening as the order gets updated and we also have an admin section I was too lazy to do proper authentication so make sure you do that if you if you're using this app the admin can oversee all the orders and they can go ahead and change the order status of each order so if the idea here is as the admitting is it we want the user to see those notifications in real time without the need for refreshing the page now this is all basic crud in laravel I will make the code available if you want to go ahead and take a look but this is going to be our starting point so I want to start off by implementing the most basic functionality where our laravel app fires off an event to pusher and at the same time our app can listen in on our JavaScript for that event that was pushed so basically I want to have one window that fires a route and another window that listening listens in on JavaScript and receives that so let's go ahead and get started it's going to my code editor and again I'll make all this code available for you so the first step is to go into our environment file and change the broadcast driver to push it our next step is to go into our config up and where is it uncomment this line over here the broadcast service provider now the next step is to make sure that for every view we have a CSRF token I already have it here but make sure that every view has this and it's in my layout file so every view is extending this this layout file the next step is to just clear that out install pressure client let's go ahead and do that okay that's done the next step is to go into pusher so let me just log in here and make a new app let's make a new one let's call it pizza and us 2 is good let's create it and let's grab our credentials here and let's paste it into our environment file it's ready a section for it here let's just do that I need these quotes okay also in our config broadcasting I don't think you have to do this but it's do it anyways let's add two more options here at the cluster which is us two and encrypted to true okay our next step is to make an event so let's go ahead and go into our event service provider and let's make an event which we're gonna use it later when we build up our Pizza app the event that we want a notification to happen on is let's call it order status changed and it's do the same for the listener order status change listener and then it's to HP artists in the event generate there we go those two remain right there now let's go into that order status changed and in order to get this to broadcast to pusher all we have to do is implement should broadcast and we also have to specify a channel here by default it's a private channel but we're gonna make it a public channel for our demo and let's call it pizza attractive now let's go into our routes file let's go ahead and just copy this and we'll make one called fire and all that's gonna do is just return fired here alright but we want that too fire off that event so it's new it up order status changed and let's import that you know now when we visit this route in our browser this should fire off a message to pusher and we should be able to see that from within pusher so let's go ahead and do that let's go here fire okay so it's fired go into our debug console here okay let's do it again okay and there we go we see that it was fired and pusher successfully received it so now we have to set up our client side to be able to listen for this so the first thing we should do is npm install the next thing we should do is install laravel echo so let's go ahead and do that okay it's done now let's run our watcher okay let's open up another tab or well real time yep okay now we wanted to go into our bootstrap J's files well bootstrap yes let's uncomment all this stuff here to get echo to work okay that work let's add two more things here let's add the cluster which is us two and let's add encrypted set that to true okay now in our layout file let's go it I've already done it I already just wrapped everything in the app namespace so you can work with it and now just going to our app yes let me just paste this code in here and this is what listens for messages to come in from pusher so we specify the channel name which we specified in the event that we fire off and we're listening for this specific event that we defined in laravel which is order status changed and we are going to log this message once we successfully hear a message from pusher say that okay that worked so now if we did this correctly let's do this move this to the left let's open a new window let me log in first oops I don't mean to fire it login okay let's inspect so now I expect a message to show up here I forgot to put my pin my pusher credentials in so back into half chance my booster after there yes I forgot to put this in so let's go ahead and grab that UV I think it's the pusher key okay let's put that in there okay now this error should be gone okay now when I fire the event we should see a message appear here and there we go we get oh my god real-time bro so the most basic example of getting laravel view and pusher working so the next step is to go ahead and extend this and work on our pizza app awesome so the first thing I want to do is just get a progress bar to appear here for that we're going to use a view library called view strap which is just an extension of bootstrap but instead of using jQuery it's using view make sure you don't use this one because this one was originally built for view 1.0 and it was never maintained for view 2.0 make sure you use this one wff franco okay so let's go ahead and install this okay it's done back into our code and I can use it from the root instance here but I'm gonna go ahead and make my own component because I'm gonna be extending it and it's just easier for me to work with when I have my own component so let's go into where my resources components let's go ahead and duplicate this one and name it order progress top you okay for now let's just say order province component just just see if this works and I'm going into my show no I've to go to my app and I have to specify my view component save that okay now in our show let's just go ahead and replace this one with the component we just made progress okay see if that shows up okay so our component shows up now let's go ahead and make it work well let's do this okay it's important the one we're using it's not called alert it's called progress bar and we also have to specify our components that we're using so that's that make sure we have a comma and progress lock okay now let's go see how this works let's just grab this and not there and here I mean she likes this reinvent let's just put a random percentage in here and say 50 I want to make it like it success success makes it green see see can't see if that works oh there we go I don't want this label here I think that's an option here you don't want that I think there's an also an option to make it animated okay there you go cool okay so we also want this order status to be part of the component because we're gonna be changing that dynamically as well so let's remove that from blade and put it into our view controller here it's just this part let's grab that put it into our view component right here but for our view templates you have to remember you have to have a root instance always sorry like a root tag let's go ahead and do that let's do that that did not work why not oh that's just click that for now we'll make a dynamic later on okay see if that works okay so our next step is to make this thing dynamic and in order to do that we're gonna have to pass some data in from their Bell into our view component so before I do that I want to show you the status model as you can see each status has a name and there's also a percentage that indicates how far along this order is far along the status is and that represents the percentage of the progress bar that we have so with that being said what do we need to pass into here we need to pass in obviously the status we need to pass in the percentage and we also have to pass in the order ID which I will explain that one later on so let's go ahead and do that in our show let's pass in those things so the first thing I said was status it's for any fashion order status name okay oops the next thing I'm gonna pass it in is let's call it initial initial is this the percentage of the order status I forgot my brackets order status percent and the third thing when the passion is the order ID just order ID okay now let's go into our view component and let's accept those as props so props what did we name that and status I believe up status initial and order ID okay make sure we have a comma and that's good let's specify the data don't forget a comment I always forget that about the coming comma I always forget that column so return okay so we want status and initial to be mutable because that's gonna be changing based on the admitting it so we have to specify this data let's make a new one called status new and it's accept a prop here and it's taking a little called progress and we'll accept the prop as well okay that's good now in here we can specify status new and in this percentage indicator we can specify the progress right yes programs now the reason we're accepting the order ID is because for our event we're going to want to pass the order ID here as well for the channel that we're listening in on also we're gonna be wanting to accept the order when the event is fired so let's go ahead and do that construct let me just make an order here okay it's good make sure this property is public though because they have to be public in order to be serialized and passed to our JavaScript and you don't have this but I like type ending it so import that might work yeah okay okay and now for our channel I like doing dot channel name so this order ID and now in our view component we're going to be listening in on the new channel now so let's go ahead and did what we did earlier grab what we had earlier where we had the code that listened in on that channel spaced out in and this is now accepting the order ID so we have to append that this order by ID it just changes to order because that's what's coming in let's just see if that works say okay oh one thing we have to do is we have to fire the event from whenever the admin changes the status so whatever this happens and they press update status we have to fire the event from there so go ahead and do that let's close some stuff out here dad like that okay so where's that I think it's not admin or control yep I think it's the update yeah so right here we can fire a new event new order status changed import that okay but this is also taking in the order now we just added that okay so I hope you're following along here so now when the admin updates it it should fire an event and our JavaScript should be listening in on that let's do this again okay inspect console its treasure so zoom in and we're currently on august 11 let's go to order one okay order one let's see if we see the message in here once we update yes there you go we get that message real-time Pizza Tracker so our next step is just to update our data and because you has two-way data-binding these things should update in real time so let's go and do that okay so what am i doing I am going into my view component and right here we only have to do two things so it's update the status so that would be this status new equals the thing that's coming in which is being passed in as order actually that's not gonna work that's console.log of order let's do this again I just want to show you one thing and I'll show you how to solve it after okay so we get to order text is kind of small but the only thing that's passed in here is the order model and since the status is its own model it's not being passed in here we have the status ID but we don't want that we want the actual status name and we want the actual status percent which lives on the status model so how do we pass in that additional information because here like I said earlier only the order is being passed in so in order to pass in additional information we're going to have to make a broadcast with method which adds any additional information you want to pass through so I'm gonna paste it in to save time it's really straightforward it is just broadcast with and I'm just making a new array of the additional information we want to pass through and then I'm just merging it with the actual order and that's what's gonna be passed through so let's try that again fresh fresh again so order one let's change it now if we just if it is correctly there's our order and now this should have the new tune of things we passed in so there we go we have our status name and we have our status percent so now we can respond accordingly here and so all we have to is this not status new equals order that status name and this dot progress equals order dot status % say that that worked and let's refresh and it's refresh this now if we do this correctly these two things should update in real time once I update it on this side we don't need this so it's on big right now if I move it to quality check and hit update status hopefully this will update and there you go you see the progress bar move forward and you see the order status move forward and this happens in real time obviously not gonna go backwards but just to show you that it works awesome that is some real-time stuff happening and that means itself delivery just add one fun little thing in here how about we add an image once once the status is on the last status up for delivery so image I actually have it in here already it is an animated gif like everybody loves delivery and it's just at a directive only shows it if progress we have that progress data in there if it's greater than 100 then we know that it's finished so let's see if that works with my back one actually have to refresh it that's refreshing okay we have to refresh the side but that's profession anyways and if I did that correctly there should be a nice image that shows up here and there you go we have a live feed of the delivery boy delivering your pizza so I wanted to go ahead and add more types of notifications in our application this one is an alert notification so whenever the end maintains the status we see an alert message like that so let's go ahead and do that so first thing I want to do is just duplicate this one let's name it order alert not view okay let's just do order alert component for now and it's gonna be alert this one will be alert what change of props later for now we'll still take the order ID I will take this out we can leave this and we don't need this so if that works we have to go to our app that yes and order alert order alert view okay now from our show we want to do anything here just name it alert and we don't need status and initial but we still need the order ID okay see if that works okay here we go so let's see how this works where's the alert okay copy that and it's going to our component and up here do that okay so this just the model is the thing that's controlling the visibility and I just named it show other and it's set to true see if that works okay so there it is so that's four seconds that's good I change the message here change it to order status updated and order ID order ID has been updated okay and let's set it to false initially but once we receive the message from pusher we'll set it to true and that should do it go ahead and do this again just refresh it okay say border one okay let's change it and there you go see if it disappears and it does okay so we have that working okay but we have a problem here the problem is our our channel we're listening in on requires the order ID to be specified now what if we want this notification to happen on this stage we can't do that because we need a channel that has order ID so how we're gonna fix that we can fix that by in the event that fires over here we can listen in not only on this channel but another channel as well so to listen in on multiple channels we have to return in a ray like this return an array and we can still listen in on that initial channel because we need that for the other order progress notification but we can also let's just make a general channel where we can listen in anywhere call it Pizza Tracker with no order ID appended and now in our component we're not listening in on this channel we're just listening in on Peter tracker save oh and one more thing we have to do we have to add actually should like to show we no longer need this order ID say that we can take we don't need that as a prop okay and see if it still works well back here just make sure it's still working okay it still works the ID is not there obviously anymore so let's go ahead and you can just have the order ID in the data properties the order ID initially is empty but then we can specify it it's coming in so this that order ID equals order ID that should work okay try that again make sure the order ID is displaying there we go order ID 1 has been updated and now if you want this to appear on the other pages like this page and all we have to do is place that component in that page but it is called index yes index and you can just put it anywhere let's put it right here order progress I think order progress and see if it happens on that page as well just refresh okay and that's updated and that did not work let's see what's going on here okay relieved it received the original one how come I didn't work for hours oh sorry order alert my bad yeah order alert and this should work there you go and the appropriate ID has been passed through and it shows up there so if we go into too it should also notify you here there you go but we have a problem the problem is even if the admin pages the order that doesn't belong to you like as you can see or ID 3 belongs to another user but we're still gonna get a notification here just to show you we don't want that because that's not our order we don't care about that order so let's go ahead and fix that so to fix that we have to actually pass in the user ID that's logged in and we can compare that with the order the orders user ID and make sure they're the same to make sure that we can only see notifications that belong to us so let's pass in the you can pass it in from the controller but I'm just gonna be lazy and do it in from here so auth user ID and I think we had it in show as well now if you want this if you want this notification to happen on every page just put it in a nail file okay so we're passing that in now in our component if we accept it as a prop okay and now we just have to do one check here and that check is if so now we have the user ID we just passed in from laravel and all you have to do is check if it's the same user ID that's coming in from the order and that way we only receive notifications if it is ours okay let's do this again so this notification should not show because this order does not belong to us so let's update it it doesn't show okay but if we update one that does belong to us it should show there you go so I want to do one more type of notification and it's this belt notification with the badge over here so if a user is on the page I want notifications to appear here with the most recent first and it has a little nice little time component over here now this is not going to persist notifications if you want to persist notifications look into levels database notifications it's only gonna happen if the user is on the page so let's go ahead and do that go into our code let's duplicate this let's call it order notifications dot view okay leave that for now we don't need any of you strap stuff we don't need any components just leave it empty for now empty for now we can leave this we don't leave this and do for now okay now this is actually a partial in my blade view what's it called views partials notification drop-down okay so let's just grab all of this and paste it in our order notifications here let's just indent that let's add just need of a new component here order notifications order alright notifications okay and let's just comment this partial out and replace it with the component so order notifications okay see if that works still okay it still works but now it's using a view component so the first thing I want to do is take care of this time stamp here there's actually a nice a nice library called few time ago and we'll make use of this there you go alright npm install okay that's done let's go ahead and copy this order notifications let's go ahead and paste that in you don't need this we don't need this oh okay thank what's it yep so let's go ahead and just see how this works just paste this in our component in one of the list items here let's put it where this one right here it's just see if it works so for here we're just gonna put in a new date and auto update just specifies when it updates so let's just see it's five seconds every five seconds gonna update see if that works so go back fresh okay so that worked so this should update every five seconds there we go that works okay obviously we don't want to talk to you that quickly which these 60 is good now the next thing we want to do is so for this list let's store all these notifications in an array let's call it notifications and let's set it to an empty array for now and so what do you want to happen as an order comes in we want to just push it to this notifications array now we want to push it to the front of the array so we're gonna use instead of dot push we're gonna use dot on shift and I'm gonna paste a code snippet in here so you have to watch me type it and all I'm doing like I said is I'm pushing to the front of an array and I'm pushing in an object which has all the stuff I need so the description is just gonna be the order ID updated the URL is just the the show endpoint and the time is just the date that I came in so I'll save that and if we do this again open up our dev tools go in to view dev tools look at our notifications okay it's empty obviously don't worry about the badge we'll worry about the bed after so let's update it and see if this notifications array actually grows and it does not why not oh that's because we also just like in our alert component we have to pass in the user ID so let's go ahead and where was that here it's passionately user ID as well user ID equals God user ID okay you're not sorry I put this in the wrong place that should be in props I'm sure you saw that now this should work alright the third time is a charm let's see if this works and it's a review okay this should go I see the prop there now I'm almost certain this will work there you go you see that our modifications array is growing okay now let's focus on getting our notifications to render in our list items so we have how many we have here we have three before actually in clean that one so let's get rid of let's keep this one let's get rid of these two and this one is for the see all alerts oh look at that one okay so let's go ahead and make a loop v4 so notification in notifications so the first thing this is where it's gonna link to and we have this as notification that URL this is the message we want to display it's gonna be the notification dock description that we sat down here right here and the time ago date is just going to be notification doctype okay and yeah i should do it the freshness the freshness so it should be empty right now okay that's it let's go ahead and see if that updates and there we go it does you close this alert you'll see that's an updated and let's see if it pushes to the front of the array so let's go to our other order which is number two just update this one and there you go you see that it pushes to the front of the array and it's correctly listing our notifications let's go ahead and fix this badge it's pretty straightforward so for here you want to display notifications dot length see if that works okay so change to one yep that's awesome and how about if there's no notifications we don't display it at all so right here we'll just check if notifications dot length is greater than zero so initially should shouldn't show it but if we update it the bad should appear and it does awesome and if you click it it goes through to the actual page I actually have an error from earlier I forgot to put the attribute name here so it should be user ID it close that and they should work now there you go one more small detail I want to fix is when you click on this and there's no others it should say no to no notifications let's go ahead and fix that so in here we can just where is that right here yes so we can just do V if notification stop like greater than 0 and then conservative no notifications if the else okay see that works so don't no notifications if there update one there we go and we have that there so one more thing I want to mention is the use of public versus private channels now all throughout this demo I've been using public channels but it could be a possibility that your app requires private channels such that messages don't fly around and people can't read them so if you want to make use of private channels let's go back to our code let's go back to our order status changed event if you're just using this syntax up here you would just use private channel here but since we're using this array syntax and we have multiple channels we would just prepend the word private - onto the channel we want to be private so this first channel is the one we use for our order progress component private - and the next thing we want to do is in our order progress component here instead of echo that channel will be echoed up private and then one more thing you wanna do is in our route channels file we have to authenticate and authorize the request here so what are we gonna do so the channel name goes here in our case it's Pizza Tracker dot and then the wild-card is ID and it's gonna take in the logged in user and the ID is gonna be the order ID so all we have to do is check if the user ID equals the order so order find ID user ID it's import to order and that should still work but now we'll be utilizing private channels ok so this is one let's go back to one over here and see if the notifications still work quality check and they do awesome so now we're utilizing private channels so there you have it guys we've used laravel laravel echo VJ s and pusher to implement real-time notifications I hope you learned something new and I hope you can start using real-time notifications in your applications I think they are a great addition and really enhance the overall user experience of an application please like please comment and please subscribe if you haven't already done so thanks for watching see you in the next one ok thanks bye

Channel: Andre Madarang

Views: 73,887

Keywords: laravel, vue, vuejs, pusher, echo, realtime, real-time, pizza, notifications, vuestrap, timeago, progressbar, drehimself, andre madarang, laravel notifications, notifications laravel, vue notifications, notifications vue, laravel realtime, laravel real-time, laravel pusher, pusher laravel, laravel vue, laravel vuejs, laravel vue project, vue laravel, laravel pizza, laravel and vue, laravel echo, echo laravel, laravel broadcast, laravel vue js, vue js laravel, laravel websocket

Id: pjK0VMTCtVg

Length: 56min 5sec (3365 seconds)

Published: Fri Sep 29 2017