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

[Music] right now I have this statically generated I'm going to add I should say user name and we're going to do it through the tweet we're gonna grab the user that name and the same is true for our username so through the tweet user dot username and then our tweet tweets still intact so if all goes right nothing should change but that's getting generated randomly not randomly dynamically I'm sorry so great because we have a rails there that's all setup so if I were to really test this theory I could sign out I'll probably do that with the UI next a lot why don't I update our application layout to add Oliver sign inside out stuff just make our lives easier here so like I said before we're gonna come back to this we have a sign-up link already here it's not pointing to anything yet so all this stuff I want to actually check to see if these are signed in first so we'll actually do if user signed in and this comes from device it's a helper as I mentioned before this will be an end and in here we want to kind of repeat code which doesn't feel very dry but it's pretty cool because it doesn't render if it's it's not actually true so let's go to the current user name and we can get that by grabbing the current user name and then we can if let's say if they click on their name they can go to their edit user registration path which is again if you've run rake routes you can see that as a path possible path and then is info then we'll close that tag when you grab a current user if you if you actually use this in production make sure you check beforehand if they're signed in if they're not it will air out and you will have bad day so that I've learned that and you know the past of working with us that it can be troublesome if you don't check first to always check if the user signed in okay so link to log out so this is if they're signed in this whole block so I'm going to go to log out and we'll do destroy user session path this is gonna be kind of like a delete button almost we're deleting the session so to do that we actually want to return a method delete and we'll give it a class of button and his info as well and these buttons are gonna be the blue color but when you hover over them they'll be slightly darker blue color so I want them to just appear as links when we look at them okay so if and then and actually we don't want to in there I'm gonna else so if they're not signed in we do these sign-up and sign in I'm gonna just copy and paste these sign in this will lead to a new user session path and sign up will read lead to a new user registration path we register a ssin path great so in essence don't forget this in tag great okay so for the user signed in at this point hey I'm signed in so you can see my username and I can log out so just I can log out by clicking that I'm logged out now I can see the sign is signup buttons if I sign in I go I'm redirected to the users are sign in path so I believe I did and you a crunch log in and now I'm in if I go to the Edit user you see all my information here if you want to change your password you can do so and you can also cancer your account here as well so that's pretty cool that's all out of the box with device obviously I've customized it here to work with boma but that's essentially the user model going on here so then we were pulling in our user information on the tweets as well and next up I want to add specific areas that if the user signed in I don't want to see this trends thing I want to see my profile stuff or vice-versa with some other controls over here if I'm logged out I shouldn't be seeing these controls you know that should only be user related stuff so let's touch on that first so the actual tweet itself let's figure out you know we'll check if the user signed in I'll go to the feet I have that open actually and we'll go right above here and just check with rails if user is signed in oh we're not writing PHP today then we'll have another end right here why is it there though I'm curious I think I brought that wrong I'm using notes right now I think it should be actually after that nav so well we're checking if users sign in basically if they are then they can edit this if they're not then they shouldn't see this at all and I typed that wrong user signed in or did I oh I forgot the question mark duh okay great so those controls no longer show if I sign in they should right they do great so essentially that's you know what we want out of a user account we want controls that are in view when they're logged in and out of you when they're not so great the same is true for this left side so I think I'm gonna work on that side next we also need to check actually I don't want a person who isn't logged in to be able to tweet that wouldn't make sense right so we can do that same check here because this is our actual tweet form typing this wrong user sign in do that and I'm just gonna put it on the article so put it in here so at this point we'll just see the tweets the public facing tweets which is what I want public anyone could see tweets but they can't author them great alright let's touch on the trends section over there what I'm gonna end up doing is modifying my index file so you have a few more partials that are gonna be just different types of layout so our index file is gonna have this going on but we want to check for a profile if it's for users logged in I want them to see their profile otherwise they can see this trends thing so I'll do a if user signed in question mark will actually do an else render trends and then we'll do and okay great so in between this if statement we can render the profile stuff so let's just build this out I don't have it built yet let's add it so I can go and make a partial called profile and I'll refer to template here it's quite a bit of stuff so bear with me here guys you all right so right here we're gonna add our current user and it's going to be their name and we don't we've checked we checked on the index page so I don't need to do the if user signed in on this page it since it's a partial it's getting injected into the other page so we're all good there so current user that username will show in these small tags and then I'll keep going down so bear with me again you alright so this block is going to be kind of a analytics side of things so I'm actually I'm not gonna hook into all this because we don't have some of the functionality built into this like how many followers and stuff so I'm just gonna get the tweet count for now so you can grab that tweet count by getting the current users tweet and it will actually be three e's the same there and you can get that by just doing the dot notation to count so you can always get the number of records there so this will end up looking the leave let me sign in it should display looks like I got something wrong here tweet account you mean oh yeah tweets I think yeah there we go so essentially we have this little analytics kind of thing it's actually showing how many tweets I have I make second one it will show two so great maybe homework for you maybe to implement to doing the following thing how would you go about adding following functionality into that I think you would need to look up or consider looking up how to extend the user role as devised and how to kind of have other users relate to users in a sense so I think that's how that would work I'm not sure how I would implement it at the moment because I haven't done it but that's at least a start for you I forgot a break tag here which is all that's making these into a new line for now it's just temporary great so we essentially have the bigger part of the functionality done you'll notice when I sign out the trends is back when I sign in I am my analytic kind of view going on cool so that's kind of exactly what we're going for so the really last thing I want to kind of hone in on is the Gravatar stuff and I found this pretty useful in my own projects some guy created a I forget his name created a repo that allows you to do this stuff it's essentially just like a typical rails image tag but it has this kind of short shorthand notation for it so anywhere we have these placeholders I'm gonna go ahead and update at this point with this tag which if you check out the gym I installed it first you can see all the parameters and stuff you can pass in if you want to customize this to your own liking but I'm gonna just go right like this current user dot email again we're doing that check here so I can use current current user freely we'll do size 64 and the alt always use an alt tag on your images current user name just for that so we need to also get this down inside of our tweet loop and this one's gonna be a bit different because we are inside the loop so instead of current user we'll go actually get the tweet dot user since those are related now and same here and I believe that's all for this view we have more in the profile view one here and that one's gonna be basically a copy of what we have over here current user so I copied and pasted that in and I believe that should do it guys so let's double check do I have a Gravatar that's the next question it's double check there's a URL image is 60 looks like it's time outputting so something's up right now see if we got any airs doesn't look like it maybe I'll restart the server for safety's sake hmm okay so let's see should be able to grab the oh I know what it is I forgot the equal sign and gosh gotchas I'll get you every time so don't forget that because otherwise it will not all put I'm just testing you guys that's what's really going on did you catch it there we go my profile profile image if you get what I mean they're awesome so we essentially built a Twitter clone here you can go to the show view if you want to customize this view you can I don't know that you need to I think I added some just for some sugar some markup to that file if I didn't don't sue me it's not a big deal otherwise the same is true for the editing file maybe I added some stuff here I did actually so I'm gonna just copy and paste that in so you guys can see it real quick so we'll go to the edit file and pull up my working directory here tweets edit grab this copy it in and I'm gonna change this tweet I used a different tweet for this actual project tweets path these be three two E's great I believe that should do it let's go back to the browser verify there we go so it's just basically add some classes centers it and makes it all pretty same with new let's do that real quick too so it's good and you grab that code go into new paste that in change our model name great boom so you can essentially compose a new tweet on the new path or do it right here I think to make this a little more realistic I want the tweet to go to this I want this button to link to this page and we can actually set the field on our form to auto focus if we want to I think it's auto focus see what happens yeah so if i refresh its already focused great but I want that new button in our header to go to the root path essentially instead of the new new tweet path here so we can just say either tweets path or root path so in essence it should just kind of redirect to itself and it focuses on that tweet box we authorize each wheat hello from Swit sure awesome so that one's good to go I'm gonna log out and maybe sign up as a different user so I'll do web I don't know John Smith J Smith Smith will do J Smitty cuz that's cool John Smith and email calm so we haven't talked about validation like I would probably put that as something that you can't sign up as if we're going to do that won't get into that on this this video because this one's going long enough but we made to talk about that on future apps that we build as we go on because it's super important so we'll do J Smitty in the house y'all that's totally what chase made you would say awesome so it's getting this default Gravatar cuz I don't think that's a person and then mines so if I have to log out I can see John's and mines tweets they're all in line we can see trends we don't see the profile we see who to follow if like I said for homework maybe you can implement some more features like maybe when these alerts show you can do a JavaScript time-out on them so they hide after a few seconds because they're right now until you refresh they're still there maybe implement actual the following process to make Twitter a reality or even add in like the liking functionality on the tweets themselves for public facing users instead of just you know users that can log-in so what I mean is you know these controls are available if you're logged in what are is some public facing tools that could be available like a light at least a like would be cool or maybe somehow implement the retweeting thing that's that's a possibility and that's kind of where Twitter started to be honest they started on Ruby on Rails so it's possible so anyways guys I think that wraps up this pretty long video or a couple of videos I'm gonna try to chop these up into smaller segments so you're not stuck with the 2 hour or YouTube video or something like that so I hope you enjoyed this I hope it taught you something I learned some stuff along the way as well so let me know about it in the comments and as always thanks for watching and I hope to see you in the next build you

Channel: Web-Crunch

Views: 11,124

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

Id: V4h7-hR_WME

Length: 21min 36sec (1296 seconds)

Published: Sat Dec 02 2017