Adding Products To Your First Freelance Rails 6 Restaurant App | Week 2 Episode 2 - 20in20 Challenge

hello everyone and welcome back to the Ruby on Rails 20 and 20 challenge this is week 2 episode 2 so last time I talked to you guys about this restaurant project idea I had which was a creating your first project for like a freelance gig and you had Frank and I said let's not get too crazy with the project specifications but then I started talking to people in the comments and now the requirements are a little bit crazier so I'll post the comments on screen right now or something but basically the conversation turned into actual people actually being affected by this coronavirus outbreak because I'm recording this on March 27th so there's people that are shutting the doors in the restaurants and the people just go home unemployed and there's some people that don't have a way to order food online off their website so the new requirements which I'll probably detail in like a new part one episode or something maybe the pin a comment to the part one episode or whatever the new requirements are whatever we talked about in part one previously so Frank needs a restaurant with the menu and the catering options and the location address on another page we're also adding the customer reviews and the admin panel so you can edit stuff but now we're also adding in a new component we're adding an online ordering and for this we're going to be creating a shopping cart we're going to be using stripe for checkout we're going to be deploying this to production hopefully I haven't deployed anything to production since about rails 4 so like 2 years out of date on how to do that I haven't done it with webpack so that's gonna be a challenge for me I also haven't managed to get my stripe account approved yet so when I cover setting up stripe there's gonna be a certain point where I have to point you guys to like another tutorial off my channel unless I can work this through with stripes customer support or something but for now I do have stripe working in development up to a certain point where the payment is sent to the server like to the test payment and in the server I can see it in the log that they did successfully get the request I just don't get a response because my account isn't verified because my YouTube channel wasn't businessí enough or something so I'm gonna try and work through that so when we get to production I will try and link you guys to a tutorial on setting that up if I don't get it set up myself but yet we're going to have stripe for payment processing with credit cards we're going to have a shopping cart the shopping cart will have a bunch of products and order items you'll be able to see your subtotals and your totals update like in view without having to refresh so when you scroll through the menu now you're not just gonna see like all of pepperoni pizza BBQ pea so etcetera you're going to see ok so there's like an image right here the image is you know one of the featured items so like maybe the featured item is pepperoni pizza and then you get down and you see the item you see like a description of the item you see the price and then you see like a thing to add it to the cart so you'll add it to the cart it'll update your total you can then go to your like shopping cart page to remove it from your shopping cart if you want to or update it change the numbers proceed to checkout once you get to checkout you checkout with stripes you enter in your credit card information your address that gets sent to the server that response comes back and it basically says like your orders on the way and then from the restaurants point of view they log into their stripe dashboard where they have like all of their payments listed in like the super advanced GUI it's really cool and polished and then they can say ok we have this new order they want barbecue pizza let's get to work and let's go deliver it but yeah that is the new setup so this is probably going to extend into next week I can't help it I'll have the week 3 project be a different project and I'll also work on this one probably so week threes project might be a little bit smaller just to accommodate this one but I'll see I've gotten a lot done over the last like day ish trying to piece this whole thing together because I've never done a shopping cart before I've never used stripe checkout before I'd haven't done production and years so all of this is kind of fresh for me but I'm making good progress I think I can probably get this done by Sunday maybe and push it in the next week but I really want to get this out because it feels like this is an actually important project and it's also just a complete project that you guys can see start to finish how something like this is designed sans the testing and stuff but yeah let's go ahead let's jump into some code because I've talked for long enough ok so let's go ahead and let's get started we have a couple options here I think the easiest thing would probably be to start with a controller for our pages so we'll start with rails G controller pages we want a home page and I guess we can do a catering page we need a info page and I think that's it for the generic pages we're not doing the menu page because we need a specific controller for that for how we're going to handle things later and the reviews I think we'll also want our own controller for that but for now I think we're good with this now the next thing we want to do is create the items that go on the menu that eventually will become our products so for this we're gonna start off by just calling them products instead of like menu items or meals or whatever so everything that's on the website we want to be a product like if you're looking on the menu and you see a thing it should be a product so that means that we'll start with a rails G scaffold for the products and there's going to be a few of them so we're gonna start with a name so every product should have a name they'll also have a description of type text and the name is going to be string by default because we're leaving it blank they're also going to have a price which is a decimal they're going to have a couple boolean x' so my plan is to hopefully implement some sort of search filtering so we're gonna have we're gonna have a boolean for and I'm gonna try and do these in alphabetical order gluten underscore free : Blin kosher : boolean lactose I guess this would be it would makes more sense if this was dairy so let's go back and let's say this is dairy underscore free colon boolean and then we can come back down here so we have peanut free colon bool in we have vegan boolean vegetarian bool in we also then have an available in boolean a catering catering : boolean and a featured : boolean so let me just well let's run this and then we can come over to app assets stylesheet scaffolds SCSS and let's just delete this before it even has the chance to plague us with its pitiful existence no offence creator of the scaffold sheet I just I hate it with a passion of a thousand burning Suns let's come into the DB and migrate folder and let's take a look at these so by default we're gonna set the name to just be the empty string the description will also set as default empty string and we're kind of just doing this so that all of these have a default value because we're just trying to make sure that we don't miss anything here so for the price the default price is just going to be 0 dot 0 whoops dairy-free by default is going to be false gluten-free by default is going to be false kosher by default will be false peanut free you guessed it false you could also just be copying and pasting these vegan by default is gonna be false and there's no guarantee that Frank is going to use any of these right he might just leave them false straight down the line but I'm mostly doing this to show you guys how you would set this up since there was the discussion in the comments about like creating this for people that are actually struggling right now because of the coronavirus so i just went ahead and i set all these to false but we're actually going to make available be true and i guess we'll leave the rest of them the way they are so let me go through these and explain we're going to use the dairy free through vegetarian as a way to like search the website so maybe you have like the menu page and then on the menu page you have a featured item and then you have like your appetizers so your featured item is just the appetizers that we're featured is true and then like just in your array just say like between 0 dot of this and we're just grabbing a random element from here so we'll just grab a random featured item and display it up there for our like for a menu page so each category will have like you know when you look at let me pull up a menu real quick okay so this is a restaurant like a local restaurant near me so when you scroll through some of these restaurants they'll do something where like there is a category of food so here it's pizza and then there's like an image here for one of the pizza items so this is the veggie pizza now if you refresh this page it stays as the veggie pizza but for us if we have like the veggie pizza and maybe the barbecue chicken and the super-deluxe all set to featured then it'll just take one of those three and put them in here or you could like do a bootstrap for carousel so if I come to the bootstrap 4 page and components and carousel just something where you can like slide through all of your featured items so the user can see that when they're looking at the restaurant and then like you go down then you have salads and it's the same thing and it repeats and then subs etc so we're just we're just doing something like that by using this featured flag so we're gonna say like for products that we're catering is true we're gonna grab all of those and we'll put those on the catering page so it'll still be pulling from here we won't have a way to order a catered item like generally for catering I think you have to call in so you'd like but you could at least look at the website and say ok so for catering you know they have barbecue chicken pizza available so we'll just order like 50 of those deliver them to Dean and then he'll be set for the rest of the week because apparently he can eat you know seven and the seventh of a pizza per day it's pushing and even by my standards but yeah you get the idea so that is the catering and the featured available is just like maybe you no longer serve this it's still in the database because they didn't delete it and they're using this to say we used to have this but now we don't or maybe they're out of it or like maybe there was when they had the recall on Roman lettuce maybe you just set it to false but by default it'll be true because if you're creating it you probably want it to be default by true and then price obviously we're using for the checkoutdescription is just gonna be like if you have a barbecue chicken pizza you might say this pizza like in the description contains freshly harvested free-range ham from upstate New York and you know gluten-free dairy-free pasta on top of it or something who knows not the healthiest meal but you get the idea now we do have two more migrations I guess that we need to create here so for these let's just go ahead and create them now so we'll have them later the first one is going to be rails G model orders and we want in order to have a subtotal which is of type decimal and we also want a total of type decimal so we can run that and then we also have a rails G model order underscore items which are going to have a quantity of type integer a reference is broke a so then we also want a product colon references and I think that's it for that one we also need an order colon references a total colon decimal and a unit underscore price colon decimal so we'll run those migrations let's now do a rails DB : migrate command to migrate the database and I don't have any seeds in this file maybe the other one has it this is not the right one but we can probably just well let's just open up migration and let's take a look so these are by set by default so we should actually be good to leave some of them blank I believe so let's just say you know 25 times do i and then we'll say products our product create Fang and then we'll say the name is let's just create I guess the same name a few times here we're not going to install the faker gem quite yet so give it a name of pizza a description of lorem ipsum barbecue chicken upstate New York free-range doe comma then we'll say price is let's make it like 1199 and it is available for catering so say catering underscore item is true and we coups already had that closing parenthesis there so that should hopefully work so if we save this we can also because we are going to be adding user accounts so let's just go ahead and say user dot create email will be admin oops open up some quotes admin at example.com comma we also have a password colon and then we'll just give it a password of password they also have a password confirmation of password and then we will say admin colon true so we haven't created the user yet we're going to be adding devise so let's come down to our gem file on below image processing let's just go ahead and say gem devise and we'll say gem simple form and I guess we can also add bootstrap right here don't mind me I'm just watching this really cool guy who does tutorials on this to remember how to setup bootstrap even though I might have done this exact video about 12 hours ago so we're just gonna pretend I'm not doing this and hide my shame first thing we'll do is will add will say yarn add and let me clear the seat can actually see what I'm doing here and maybe I'll fullscreen this just so you can see everything yarn and bootstrap jQuery and popper Jas and then while that's running we can come over to our app javascript packs application j/s and we can say import bootstrap and then import dot slash s RC / application s CSS and let's go ahead let's create this folder so it's going to be in the packs because we're using dot slash so say SRC and then inside of SRC we will say application s CSS is the name of a new file and then inside of this we want to do an at import tilde bootstrap / S CSS / bootstrap and then we can close or save this and close it we also want a global dollar sign is equal to jQuery next thing we need to do is come over to our config web pack environments and we want to say const web pack equals require web pack we then want to say environment dot plugins dot append capital P provide and then call a new web pack dot provide plugin and we open up some parentheses and a brace and then we need to say jQuery oops dollar sign is jQuery comma J query with the capital Q is jQuery comma and then popper colon with a capital P open up square brackets popper J s comma and then another one for default and we can save that and now let's go ahead and if minimize this and pull over a window I might be able to say bootstrap for Docs let's come over to the intro and let's just grab a it's coming to components and let's grab a navbar just because it's the thing that I like to use to test this and then we can come over to application views layouts create a new file call this underscore navbar dot HTML data RB paste on the navbar save it come over to the application dot HTML dot e RB and then we'll do a render layout slash navbar and then we can save that the next thing we need to do is come down to config and routes dot RB and let's change this get pages slash home to be root and then we'll say pages hash home which is the pages controller home action now if I come over and I open up my terminal again and I do let's see I think we already did a migration but we'll do it again we'll just say rails DB colon migrate and and rails s that should at the very least start the server and then we can see if we horrendously broke everything or if this is working as we expect it to so if the server starts up properly it'll probably tell us the web pack needs to compile yep there goes and then once it compiles hopefully we'll see some semblance of a bootstrap navbar and we do have a bootstrap navbar which means we are set to go so let's go ahead and let's get started with setting up devise so let's kill the server and let's say rails G device called and install and let's do a rails g device Colin views and then let's do a rails G devise user and let's give this a admin : boolean now let's come over to our DB folder open up the devise and let's come down to our like the bottom of the main devise loop oops there we go and what we want to do here is we want to say the boolean or the admins fine we'll just say default is false and then we want to say T dot string username default is default and we're just doing this because at some point we will be adding in the devised usernames so let's go ahead and run a rails DB : migrate command to migrate that they had a base here and now that I've seen that we're adding the username here oh I guess it'll be set in the seats we should be fine so now let's go ahead and let's say rails G simple underscore form : install and then space - - bootstrap ok and now let's go ahead and let's say rails s to start the server again and let's open up our application and refresh the page okay so now if we come over here and we say slash users slash sign underscore up we'll say Dean at example.com password of password okay and we're signed in and we have simple form so that's good so now let's go ahead and let's close some of these things so we can actually get started first thing we want to do is come up to and let me close all of this let's come into app views layouts application on HTML a tee or B we are no longer using this navbar so we'll get rid of the render refresh the page and then we'll also delete this navbar HTML partial the next thing we're gonna do in here is set up our main pages so for this we're gonna say let's do a div with a class two and then we'll say at page and then - page and this is just something we're going to use in a little bit we'll also do a div with a class of row and a class of page - container and if you're wondering how I'm doing this studio visual studio code comes with Emmet preinstalled but if you come up to file preferences settings and you search EMM ET and then you scroll down you can trigger expansion on tab and if you do that when you type something like dot example underscore class and you hit tab it'll create a div with the class of example class and if instead you use the hash or the pound or the number sign or whatever you want to call it and you hit tab it'll give it an ID instead you can also expand this and give it like a ID and a class of class name or something so that's how I'm gonna be expanding stuff so if you see me do that it's just a force to have it so that's kind of how I do it I do have some tutorials I'll link to them and cards about setting up a visual studio code the way that I have it set up so let's go ahead and let's close off the second div and then after we have this row page container the next thing we want to do is say render layouts slash links which is a partial we haven't created yet we then want to say let's create a div with these over the class of column - 8 and then in here we'll just say unless at page is equal to home render layouts slash title I'll say end and then let's move the yield tag up here and then outside of this we'll do a column - - and then we'll save this and we'll refresh the page and we'll get quite a few errors here that we have to deal with so the first one we want to deal with is this title right so if we come over to our well we want to come into our layouts and create the title partial and the links partial so let's come into layouts new file underscore title dot HTML DRB and I will create a new file underscore links dot HTML dot erv the next thing we want to do is I guess create this title so for this we'll come into our title partial and we'll just say give it a div with a class of title - card a h1 with a oops a class of title - text and then inside of this will just say Frank's foods and save that next thing I wanna do is come over to links and then we'll do like a column - and for this I guess we can do a hh5 the class equal to link container and we'll close this off and then let's just do the let's do a link to the homepage we'll give this the route path a class of link and then we also want to and let me just full-screen this so you can see this at page equals home question mark so if page is set to home then give this a class of active else which is colon just return the empty string so all this is doing is it's checking if the current page is equal to the home page if it is give it the active class if it isn't then don't give it a class we'll add a space here and oops let's just go ahead and let's copy this a few times so we have the home we also have the menu which we're going to stub out for now because I don't think this exists right now so let's just leave this blank and for this we'll set this to be page menu we also have one for catering more information and eventually customer reviews so let's go ahead and let's fill these out real quick so say this is catering page is catering set it to active I will say catering path this is more info and we'll give this the InfoPath will set this to info and then the last one is reviews or like customer reviews I guess this will have a path of just blank and a path of reviews now let's come in to the home page I guess which is under pages home dot HTML D or B let's get rid of this and let's just do a column - 8 in here just so that there's something in here you know make it feel a little bit less empty next let's come into controllers and the pages controller so in here all we want to do for the home is just set at at page equal to home for catering we'll say at page equals catering and then for info say at page equals info we'll save this and then let's go ahead and refresh to run into oops this is still here so let's come over to application that HTML dot e or B and let's which we forgot to put render right here I say we you guys probably already noticed this I just don't pay enough attention so let's come back to our links now let's go back to our links dot HTML go to your B and we have to fix some of these so it says no no route matches catering path so let's come down to our config and our routes dot RB so there's no catering path why is that well because it's saying get pages slash catering we want just get catering comma and then we'll say to : pages catering and it'll do the same thing here we'll say two comma pages info and then we'll switch this to just be info and we'll save this so now we have five links right here but we also have clearly a scaffolds scss interfering so let's go hunt it down and destroy it delete permanently from existence never come back why do I still make applications without disabling you let's refresh we now have the links the menu won't take you anywhere catering take you to the catering page you can see Frank's food is appearing over here customer reviews doesn't work but more info takes you the more info page and we can come back to the home page okay so this video is already 30 minutes long I'm sure I'm going to edit that down quite considerably but I am gonna try and do these in much smaller chunks mainly for SEO purposes but also so that it's easier to get from place to place so if there is a spot where I can stop I'm going to stop so that you can sort of like organize through these videos better because a two hour long video is not really that helpful unless I include like all of the timestamps to everything I say so this is gonna do it for this one and I will see you in the outro video clip okay and that's gonna do it for part one in part two we're gonna sort of continue on with this idea of creating the pages for the restaurant application I'm gonna show you a quick Photoshop tutorial in the next part where I show you how I blur the background images that we're going to use to sort of make the background more interesting in a real application you would of course like get the pictures from the restaurant or I guess if they want you to use sample assets you could do that too but but yeah we're gonna have the Photoshop tutorial it's gonna be really quick somewhere in the middle of the video probably and then we're going to use those images to create the backgrounds for the pages and start fleshing out the rest of the application so that in part that's gonna be part three in part four we can create the shopping cart and then in part five we can do stripe and you know just keep this party train rolling but I'll have those videos coming up very soon because I do have the code for those done already so thank you for watching if this helped please I'll upload it we want other people to see this if it helped if it didn't help then downvote it because we don't want other people to see it then we want the good tutorials on the front page and we want the bad tutorials buried on the bottom so that other people aren't subjected to it because we've all seen it you know there's one topic you're searching for you finally find the tutorial and none of it works it's just terrible the guy doesn't explain anything so if that's the case then remember to download it and if you want to support me I have a patreon you can subscribe etc blah blah blah nobody cares I will see you in the next video thank you so much for watching goodbye [Music]

Channel: Deanin

Views: 2,662

Keywords: deanin, Rails 6 Products, Rails 6 restaurant, Rails 6 freelance project, rails 6 real project, rails 6 store, rails 6 online store, rails 6 orders, rails 6 online orders, rails 6 freelance, freelance rails, deanin rails, rails 6 project series, rails 6 tutorials, ruby on rails 6, ruby on rails restaurant, rails 6 devise tutorial, rails 6 shopping cart, rails 6 production, deanin tutorials new, 20in20, Rails Products, Add products rails, Rails Orders, order from rails app

Id: AG04MBXRi0I

Length: 31min 57sec (1917 seconds)

Published: Fri Mar 27 2020