Node.js & Pusher Real Time Polling App

Node.js & Pusher Real Time Polling App [3] – MongoDB & Mongoose

alright guys so we have basically a real-time application real-time polling application but it doesn't save any votes okay you can vote and if someone

has if someone else has the screen open they'll see that or that response using pusher but it's not really a great application because it doesn't save or persist the data so what we're gonna do

is create a database now instead of deploying a local MongoDB database I'm gonna use M lab which is a great service that gives you a free MongoDB database obviously if you have to scale it to

production then you'll have to pay but what we're doing is free so no credit card needed just sign up for M lab if any of you guys are no js' developers I'm sure you already have an account but

we're gonna create a new database and you can choose different providers different cloud providers I'm going to choose the Amazon sandbox which is free and click continue choose us East my

database name I'm gonna call pusher poll and we're gonna say submit order ok everything's free 0.5 gigs of data I think and once this turns green there we go

now this push up old database is active so I'm going to click on it and we need to create a user so I'm gonna click users and add database user I'm just gonna use Brad for my username and

password alright so now up here you'll see the the connection string when we want to connect to this database yours will be different and then that's it that's all

we have to do for now we don't have to add collections that those will get added automatically so we can go ahead and just minimize that and then let's implement Mongoose now we already

installed it in the beginning you can see if we look in our dependencies Mongoose is right here so I'm gonna create a model alright mongoose uses models and schemas so we're gonna create

a new folder called models and we're gonna have a model called vote J s okay and I gave that a capital because my models I like to uppercase alright now to create a model we're

gonna first bring in Mongoose so we're gonna say require Mongoose we'll do the connection in a minute and then we need to create schema set that to Mongoose dot schema and then we're gonna say

Const vote schema and let's set that to a new schema okay this is gonna take in an object of fields and we're only gonna have an OS field which we give a type and that's gonna be a string okay and

then let's say required let's set that to true all right and then we'll put a comma here and next we'll have points which I'm gonna set to type string and set the required to true okay the so

those are the only fields we need in our schema now we're gonna do is go underneath the vote schema and let's say create collection and add schema so to do that we'll create a variable called

vote set it to Mongoose dot model and it's gonna take in the model name which is going to be vote and in the schema which will be vote schema all right then we just want to export it so we'll say

module dot exports equals vote and that's it that's our model so we'll save now we need to connect to MongoDB so we could put all the stuff in the app J s but what I'm going to do is create a

config file so we'll create a new file they're called config and let's call this will just call it D bjs okay and in here we're gonna bring in mongoose so we'll say require Mongoose and then

we're going to say Mongoose dot connect it's actually going to give us a promise so no semicolon and then we want to put in our connection string so this is actually going to be in the EM lab let's

see is this it yeah so this right here this is this string right here I'm going to grab that and just put that in and I'm going to change the user to the one I use which was Brad and then use the

password I used which is also Brad okay yours will be different and then the promise we get we need to use dot then and we're just gonna do a console dot log and we'll just say MongoDB connected

okay and if there's an error we'll do dot catch so that'll take an error if there is one and then we'll just console dot log that okay and that's it that's all we need here actually one more thing

I think we still need to do this map global promises because before I haven't used Mongoose in maybe a month and a half or so we we were getting an error message or not an error but a warning

about promises and we had to do Mongoose dot promise and then map it to global dot promise so we just have to add that and that should be an uppercase P like that and we should be good we'll

just say Mongoose Connect and save so prettier just map just kind of clean that up for me and then we're gonna go into our app J s and we need to bring in we need to bring in that DB config file

so I'm gonna go right here DB config so we just want to require dot slash config and then DB just DB and that should bring it in so let's save and then down here notice it now says

MongoDB connected all right so we're making good time here let's now go to our routes pull J s file and from here we're gonna bring in Mongoose okay we'll bring in Mongoose and there's basically

two things we want to do one is get the the the votes because we want to initially display them here the other is to actually add the vote to the database when it's submitted so we're going to do

the ad first so what we'll do is when we hit this this endpoint when we click vote instead of just automatically just triggering this to the client we need to save it in the database so let's push

this down a little bit and I'm going to create a variable called new vote I'm gonna set it to an object and we want the OS which we can get from request dot body dot OS okay so if they choose

Windows Mac OS whatever and then points we're gonna set that to one okay so this is where it will set the number of points whether we want it to be one or ten or whatever and then what we'll have

to do to add the database is say new vote okay because we have a model called vote that we brought in actually we did not bring in we need to so let's put a pin in that

for a second and just go up here and bring that model in so vote equals require and that's gonna be in dot dot slash models slash vote okay now we can go down and we can say new votes and we

want to pass in that new vote variable that object that I just created above and we want to call dot Save and then that gives us a promise back so we want to do dot then okay and then inside this

promise it'll give us the vote that was added to the database so what do we want to do with this we want to then send out the trigger and the return so I'm just going to cut this from here and move it

into the promise okay or the promise response so we're going to trigger OS poll OS vote that's all the same except instead of just putting a one here we want to put the vote dot points okay

because it's basically give them giving us an object with the points the OS the ID so we want vote points but this is a string okay it's going to be a string so what I'm gonna do is wrap it in parse

int because what that does is it takes a string and turns it to a number okay and then for this one we're simply going to say vote dot OS so what's going to happen is when we hit vote the the

option is going to go into well first of all the OS is going to go into this object here it's going to get put into new vote we're gonna then call new votes because we have votes set up as a model

as a schema we can save the new vote and then it'll give us a response from that as a promise give us the data and then we're gonna then do the push or dot trigger

and we're gonna pass in that response from the date from that promise the points in the OS okay so hopefully that makes sense so let's go ahead and save that and then hopefully let's reload the

front end hopefully if we vote fir let's say Windows it goes into our database so let's try it out it's not going to stick down here if I reload the page but it should go into the database so let's

vote so it shows down here which it was before if I reload it's not going to that's fine because we haven't added that yet but let's take a look at the

database so we're gonna go to collections reload and notice we had now have a votes collection and if I look at that we have a Windows vote alright so it looks like that's working we can try

it again let's do Mac vote okay it shows down here initially it's not gonna stick though but it should be in the database so now if we go back and I reload our database there's the Mac alright so

that's all set now what we want to do is make it so that when we initially come to the page the votes we can grab the votes and put them in the chart all right so we're gonna make the request to

do that to this route here this get route so we can get rid of this and then this is actually going to be really simple we can take the model vote and we can call find okay so fine we'll do just

that it's going to give us a promise so we'll do dot then we'll call this votes okay there the whatever it's returning we're calling votes and then we're simply going to return let's say res dot

Jason and we'll send success true and let's send votes as votes okay so the response will get is just a success true and then the array of votes will be inside of votes so let's save this and

now our back end should be complete let's go to our front so we'll go to public main je s and let's see where we want to do this now we want to stay out of the form submit so we'll go right

below it here and let's make a fetch request – HTTP localhost 3000 slash pol now this is going to hit the get request the one up here we did pull but we said that it was the post request okay this

one will be the get which is what we just created so let's pass in actually we don't need to pass in anything we just need to do our dot then and remember first we have to take the

result turn it to Jason and then do another then and that's when we get the actual data alright so in here we'll say data and now this data actually I'll just log it you can see what it looks

like and make sure that it works so if we save this and we reload the front-end let's go up to right here and this is what we're getting back from this right here success true and then votes is an

array of the vote which has the ID the points and the OS okay so let's let's actually put it instead of having to do data dot votes let's just put it into a variable called votes so we'll say Const

votes equals data dot votes all right I also want to get the total votes which is really easy so total votes and we can get that by just saying votes dot length all right now what we want to do is

count the vote points for each one and the reason we're doing this is because we need to know what to put here here how many Mac votes how many Linux votes we need to know how to do that so

the the best way that I could find to do this is to use the reduce high array function all right so what I'm gonna do is say Const vote counts and this isn't to get the total votes this is to get

each one okay how many windows how many Mac so we can say votes dot reduce oops reduce just close this up all right now this reduce is going to take in two parameters an accumulator and the

current current value alright so inside here let's put in we're gonna use an arrow function so I'm going to say a cc for the accumulator and then vote for the current value and we're gonna use an

arrow function here and then this is gonna be a little difficult I actually had to kind of look I had to look on Stack Overflow for a solution for this because it was kind of confused me a

little but what we're gonna do is we're going to take that accumulator and we're gonna say vote dot OS OS and we want to set that equal to another set of parentheses and we're going to say that

accumulator and then again vote dot OS and then we're gonna say or zero and then we just want to add the points okay whatever the points are so we'll say plus vote dot points okay which we

get the points right here now points are set to one if I just wanted to hate to use one all the time I could just put a one here but I don't I want to be able to

change points to let's say ten if I want and have them each worth 10 points so that's why I'm using vote points now this is going to be a string by default so what I want to do is wrap it in parse

int which will change it to a number all right so it should look like that and then reduce is gonna take in a second parameter of the accumulator like that all right I think that's right we might

get an error but I think that's right and I understand that this is a little confusing so now we want to do is let's say the data points all this stuff down here it needs to go inside of the the

promised result here inside the dot then because we need to use for instance vote counts and if we use that here then it's going to be undefined because it's out of scope so we're gonna grab everything

from here down to down to the very end and we're going to cut that and we're going to put that right under the line we just wrote and paste that in all right let me just format that so now we

want to do instead of just having 0 for each vote we want to actually take the vote counts so we can now say vote counts and we should be able to do dot windows we should be able to do vote

counts dot Mac OS make sure it matches the label vote counts dot Linux and vote counts dot other okay and that should work let's go ahead and save and close this up

reload okay so we're getting an error let's see what it is ACC is not defined at fetch dot then see we have an issue with this freaking line here Oh actually you know what I think

we need to pass in an empty object yeah let me just put this on one line because this is multiple lines it's confusing me so volt points we have the accumulator and then that should and should actually

have another what am I missing here Oh there should be two parentheses there we go alright so that should work let's try that let's save and reload all right

so no there we go good so now it's actually getting it from the database we're getting the vote counts with this reduce right here and then we're adding the vote counts for each system as the

data point as the correct data point we make this smaller again and the whole reason I did this right here the total votes equals the votes length is because for the text or it see where it says Oh

s results I actually don't want it to say that I wanted to show the votes so I'm gonna put some back ticks in here and just say total votes and then we can simply put in a variable and we can put

in the total votes variable and let's reload and we get total votes – all right so let's go ahead and test it out we'll open up a new tab and let's paste that in there so let's vote for let's

say Mac vote and now we have two Mac votes okay and if I reload it stays because it's in the database all right guys that's it all right so that didn't take as long as I thought it would so

hopefully you learned a little something from this application I will put the code on github up with the link in the description and I might add on to this actually I might add maybe make it so

you can only vote once or maybe add some login functionality maybe Google OAuth or something like that and maybe do a deployment video I'm not sure yet but thanks for watching guys please leave it

a like if you did like this video if you're not subscribed and you like this type of content please do so and I will see you next time hey guys if you've been watching my videos for a while and

you really like what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's

reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more whoa

Part 3 of 3: Now that we have a real-time polling app created, let’s persist the data to a MongoDB database using Mongoose.

💖 BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com

CODE: PusherPoll Github Repo
https://github.com/bradtraversy/pusherpoll

PUSHER WEBSITE: https://pusher.com
MLAB WEBSITE: https://mlab.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia