Let's Build: A Twitter Clone With Ruby on Rails - Part 2

[Music] all right we left off building out the actual layout and functionality of the app we can post new tweets edit tweets destroy tweets all of those things the next step I think is to add the user role ability so these tweets need to connect themselves to a user account and you know show that person's name their handle their Gravatar all those things that are tied to it specifically and to do that that makes it feel like a real world app so I'm going to go ahead and start getting those things aligned and slowly moving to where this app looks more like a final working application so I have a server running right now we can post tweets else do want create it and it's going to redirect to the show page you'll see this one of those alerts displaying as I mentioned in the previous video there's some work to be done on our controller so this stuff doesn't quite happen because I want the actual user to just redirect to the same page once they post their tweet just to make it kind of a more seamless process to get going with that we need to kind of focus on our controller a bit I will go ahead and close my application file we'll go back into the tweets controller and look at what's going on here so when I create a tweet I don't want it to redirect to the actual tweet in most cases that makes sense if you're doing a blog in our case since our application is kind of based on that route path I want it to go there so instead of the actual tweet will just put route path for now since our route path is set to be tweets so again if I go back to here refresh and I'll do a third tweet so we'll keep this naming convention going hopefully we're just stuck here still so great that margin is still bugging me now so I'm gonna deal with IDI versification is primary when I copy this class and see if that fixes it real quick sorry I feel like I've misspelled something here it's notification okay so margin-bottom zero type of figures okay so with that done well our guard reloaded injected that style in and we should be all set here let's get the user account stuff going in this part I want to essentially tie the tweet to the user so to do that we need to first add our first let me explain what device is out of the box it's essentially already installed on your site you just actually have to navigate to users sign up I think it is and should be already here it doesn't look like it is though so we actually need to update our looks like I missed a step on setting up device so I'm going to go back to the Jim wise Jim repo and follow the instructions one step more I believe I forgot to add something in the routes file but I want to make sure of what exactly that is okay yeah we need to actually generate a devise model as well so that part we didn't do so to do this our model is going to make use of a user model that's typically what's done using device you can make however many want but we'll start pretty small and simple silver rails generate model for device I'm gonna go make sure I'm typing this right and then uppercase user is what we'll do so I created a migration it's a pretty elaborate one at that so if you were to look at it before you run the migrate command we could go check it out so it's got all these columns of stuff that go into it so it's pretty nifty this is kind of why I recommend going this route if you're going for user base cuz look how much stuff you'd have to deal with otherwise so with that done we can just run rales DB migrate and it should run that and we should have everything old good I'll probably commit this code just for safety sake and let's see you layout and markup plus devise user model probably should I've committed before that but that's okay so now you have access to this whole you know plethora of routes for our user roles so we can go into sites my stuff with load here so if I go to sites and C and Twitter and rake routes we should have all these devised based routes now because when we ran that generation of the model it actually adds a route in our config file config routes which is devised for users since we called it user so what that does and what gives us the ability to do is to go to our users signup page if we want to sign up a new user and you know that's already set to go so we have this nasty-looking form because it has been doctored up yet but you can log in you can sign in based on the route here request to get your password reset all those things based on these routes that I just displayed here so you can edit your user registration create new and cancel on all those things pretty nifty so what we're gonna start with is at least at this point getting the tweet that we author to actually add itself to the user invention before I do though I do want to add a few fields to the device signup process right now there's only a email and password and password confirmation so it's only giving me email I want a name and a user username as well basically your tweet handle without the @ sign so to add those there's a few steps you have to do and I'm gonna start there so let's go to our controller tweets controller let's add first adds V for action and make the user authenticate wealth into Kate user except for in our case is gonna be indexing show because those pages don't really need to you know authenticate for any reason and we'll need to basically need to add this fancy registrations controller which hooks into the devise gym so we'll call it registrations controller and you don't need to run a generation for this it's kind of simple of what needs to be done but this is just kind of think of it as an extension to the devise gem that's already there your best bet is to kind of add this manually you can do it however you want though or registrations controller extends from the device registrations patroller make sure you spell this right I already didn't private and we'll do it to have sign up friends and what we're doing is since rails has strong parameters as part of its creation security kind of thing we need to give the okay for device to go ahead and add these new fields we want so I'm gonna permit name username which we haven't generated yet we still need to add those email which is already there password same with that one and password confirmation and same with that one so those fields those last three already exist we're just making sure they're sanitized so I might copy this one and we need it for signed or update as well so account update and this stuff I mean I'm getting this stuff from a well it comes from the devise gem and like a how-to but it's also on a blog post which I'll share with you guys once I get it so I'm gonna keep it as is for now this one we need to actually add current password I believe yeah that's just a security check to make sure when you do update your account you interior password to update it so that's good and grand one big thing we still need to do to make this really work is run a migration and that's gonna be involving adding some fields to the users table so let's go ahead and do that clear this out I'll do the rails generate migration and so you can type this either in camel case like this or if you want to use underscores up to you I'm gonna do a camel case add fields to users spill and you can basically tell rails what to do in the command line or you can just do it within your actual file I'm gonna do it within the file because it's kind of confusing otherwise for me all right so I ran the migration and this is what you end up with if you haven't if you didn't pass any parameters and it just gives you this change method and we're gonna add a couple columns to our users table which exists already because of device so you won't mean to generate that one yourself this first one is gonna be named and we'll do one more that is user name it's gonna be a string they're both strings and then we'll finally add an index to users and user name needs to be unique because I'm Twitter I don't want anyone else to have the same Twitter handle it's an in essence so if they do rails or the app in this case would prompt you to say hey that's already taking kind of thing is how that would work so with that all set up we can go ahead and run our actual migration which we haven't done yet so we can do rails to be migrated and that should add that stuff to our database okay now we have user name and name and the user name needs to be unique so great so now if it's confusing you don't worry those at this point can be added to a new user account once they create their account before it was just email password and password confirmation which is what is setup here that is also another reason I generated two views for device which you saw earlier we're gonna use customized views to go ahead and add these in and add the name and the username at the same time so that's why another reason why I did that so let me open up that stuff and I'll go to the actual device directory which overall those views are created and the main one I want to look at is registrations right now and you'll notice it did simple forms generations for me because I had that stuff installed prior to the fact so that's super useful what it didn't do is add all the classes and stuff I need for Balma to look good and great so I probably won't make you guys watch all of that because it's literally just adding some HTML on classes and stuff to that so I might fast-forward through it but maybe I'll still you know kind of show the process so bear with me and here we go [Music] [Music] alright guys some on the registrations signup page so this would be registrations new in your template I have my mark up ready to go it's using boneless classes and it's kind of at a point to where it looks good we aren't seeing our name or user name in these fields and the reason we aren't is because we actually need to add those we did our migration before we added our controller that was the fancy registrations controller that's just something you'll have to kind of make do with since we use name and username if you use something different you'll want to add those parameters here the same for your model if you call it something else in our case it was user we added a name and user name to the user's model so will actually be appending those now to our signup form or update form account for the accountant I should say so let's go ahead and add those to our form here right now we just have the email the password and the password confirmation for signup and want the name of the user and remove auto focus from this one and I also want the username of the user so it's called username here and auto focus and remove that as well and I believe that should be it as far as getting our form to look the way we want it you'll notice though on our login page we're still back to square one so all of these views inside devised sadly need to have those special classes I'm going to do the login and basically the update for these and then you'll find on the repo everything else that's updated just because I don't need to show you all that it's basically just doing what we just I just showed you adding those classes so look for that on github otherwise I'm gonna fast forward for that part and we'll be right back [Music] you alright guys so we have our signup form ready to roll we have our login form ready to roll if we figure out your password it's good same thing all the way throughout at this point I want to make sure our users can connect to our tweets so at this point they're separate things and that's not good so to do that we need to actually add some relations to our models before we go further in our controller to make all of the fancy stuff happen we need to make sure our tweets and users can relate to each other and to do that we need to add an ID of course to a model of the tweet so let's go to our tweet model I believe I have user open let's go to tweet and let's add belongs to user so it all tweets will belong to ace individual user and user will have many tweets so space there just make it easier to read great so that relations there but we still need to generate our ID so to do that I'm going to do another migration and we're gonna add a user ID to our tweets count the tweets model and that allows each user to actually associate itself to its wheaten so let's do a get or not get my start rails generate migration and user ID two tweets and we can do user ID goals integer let's see what happens there if we open up that migration file in our DB folder we should have that column on tweets with the user ID in place so that's pretty much exactly what we're going for so I'm gonna go ahead and run that migration and we'll type rails DB migrate great now we still don't know how this is gonna connect itself but you could do this all with rails console if you really wanted to you could just run rails C and open this console environment I'm not sure what that's all about terminal type message mapper something's up there but if you were to get user equals user user connection and run user we have all these things available to us now at this point there's just the ID that will relate to our comments so if we were to do comment or I'm sorry tweet equals tweet it'll do the same thing there and we noticed the new column here user ID which gets added after that migration so rails are smart enough to know that user ID probably means hey look I want to get the ID to the user itself so when we create a new record it will sync those up and you know keep that relation intact so it's kind of a quick gotcha there if you're not used to that lingo so let's go ahead and go back to our controller and there's a few things we want to do to make divise work well with our app and it uses these things I could probably go to the repo to tell you better these little helpers and filters that if it checks if the users signed in it be you can check before something happens to authenticate user I should I do that actually already you saw me you probably weren't sure what the hell I was talking about there but this is what that means definitely read this landing page here these things will come in handy you'll use them you can get the current user if they're logged in make sure they're to check if they're logged in first same with these so if you were it's based on your model name so I used user but it's telling us here if you scan quickly if you were to change that model to member instead you could call it this and all that's dynamic so kind of a quick overview there so what we want to do is kind of configure our controller to work with device and to do so there's a few things we need to do on each on a few of these views or actions so for tweet for instance for the new action we need to get the current user and then grab the tweets on that user and then hit build so we use that in the last series if you follow along when we created a new user or a new comment on a blog post that's kind of what's going on here but it's all in the action itself the same thing is true for the create method what kind of mock what we just did and I already messed up these need to be three e's make sure you do that if you're following exactly along with me okay and I believe that might be all we need I added this before the authenticate user that's basically saying on the creation of a new tweets or edit of the tweet deletion of a tweet all those things need to be authenticated first so wit devise you can actually do that before the user is logged in make sure they're logged in to do those things you can also check if they're logged in first so you don't display certain things on the front end and that's where you're gonna get into next but before we do want to make sure I can create successful tweet and it's connected to my account so the best way to do that is to sign up for an account and I'm gonna go ahead and do that and show you what is happening here make sure this works do you up crunch I can't type my own password d okay this should work got it okay and um fall till double check that without messing with you I much we can go back into rails console if I could type it's gonna you that okay rails see and I can go into the user model I'm gonna give it a variable here just grab the user user got connection don't know really why we need to do that but okay user dots let's say the last can't spell guys great so it shows one record in unfortunately my name and username are set to nil so that's no good looks like something didn't happen that you should have alright guys I figured out what I did wrong here one step of the process and it's a blog post so I'm going to share with you as well that we need to route our new user signup in such a way that ghosts who are actual registrations controller we created before right now devise doesn't know about this and to do to tell it about it we need to go to our routes file and configure that to know about it so on our device for we need to actually come a separate until devised to use this controller to override the default one instead so we'll do the rails with the arrow here and we'll do registrations since we called it registrations controller will call it registrations here too okay so that's a big gotcha I forgot to tell you guys so make sure you do that if you don't when you create a new user role it will be like it was when you saw so I'm gonna actually hook into this user and destroy it let's start from scratch oh I didn't assign the user I'm sorry so a user equals user dot last so now user is going to spit back me I don't want I go to easier destroy and it deleted it then we should be good so if I go user equals user and user dot all should be empty empty array great so we can exit this delete that I'm gonna sign up again users sign up and look crunch believe it was okay count created let's again go into our console and then at user we'll get user the user model user dot all so we show the user ID look it created my name and user name this time so good it worked so don't forget that detail it's a big one if you don't update your routes to use that new registrations controller it's kind of rendered useless so that's kind of a gotcha but again I'll link to an article that explains this it goes it's very very straightforward it's a little dated it's from 2014 actually but it helped me tremendously so great so now we have these tweets I'm gonna go ahead and delete these since they aren't tied into any account I don't want to get any crazy errors just because of it so now our tweets let's test if those tied to an accounts this is a user generated tweet so we've got that go back to our controller something's not quite right here it's telling me that's what's wrong in the errors did you mean tweets current user all right guys I was finally able to get a tweet created with the user account what was completely wrong and what took me forever to figure out was in my user model I put tweets with two E's instead of three so if you're if you're following along you might be having these pains as well as me so name this stuff stuff you can remember and always come back to tweet I'm so used to typing tweet from using Twitter pretty often that you know you forget that 30 because it's just not an actual word so let me needless to say once you create or update this you probably won't have to worry about it because in my demo app I'm using I think probably the real word I'm not sure you can actually create a record and it's tied to my account this is still showing our our static username of what I did but what I can show you is that if I go into rails console again we can go to user or let's see at tweet the three es equals 3 3 dot connection clear that and tweet all ok at tweet equals tweet it's because I'd spelt it wrong again at tweet that all there is a tweet with the test suite it has a user ID of 2 which if I recall correctly is my user ID so if I go to at user equals user well get the user model but then if I want to use or not last I think that works no okay well let's back out of this it did show my ID so that's promising and I'm gonna go back into our views and finally kind of plug this all together so at this point our controller setup to work its routing right we have our the right routes in place our models are relating the way they should because I spelled things right this time so now we can update our views to match everything you

Channel: Web-Crunch

Views: 12,860

Keywords: ruby on rails, twitter clone in rails, let's build, Let's Build: A Twitter Clone With Ruby on Rails - Part 1, web development tutorials, rails5, ruby on rails tutorials, web design, bulma, gem, ruby, learn to code, build web apps, how to code, programming tutorials, learn to code rails, learn to code ruby, ruby on rails screencast, twitter, web design tutorials, command line, sublime text, ruby on rails tutorial, rails, developer

Id: ZxkbFOe3lRY

Length: 31min 23sec (1883 seconds)

Published: Sat Dec 02 2017