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

[Music] welcome to another let's build guys this one is going to be a Twitter clone and we're gonna do something similar to the last let's build which was a blog with comments but add some user functionality into the mix so we'll be talking about authentication roles and stuff like that what a user can can't do when they're in a given state so if they're logged in you'd see something like this pulling in handy Gravatar URL for an image a user can tweet or yeah it's it's all spelt with an extra character if you didn't notice so I'm mocking Twitter but not to the fullest degree but anyway when when you do post a new tweet you can do I have one already but just go ahead and post it it redirects the same page and then we'll have our new public-facing tweets if I were to log out we'll still see those tweets but you'll notice some of the UI on the left and right changes to get any new tweet you were actually you know prompted to log in first so there's kind of a barrier in between and that's kind of a big big thing that needs to happen with a typical web app so let's dive right in the last series I kind of did more of a foundational approach so I talked about fundamentals and stuff like that this one I'm gonna try to speed things up just because that last series was like an hour and a half long so hopefully you enjoy that if you have questions feel free to leave them in the comments or contact me to work directly as always this stuff is gonna be on github and I'll share the link in the description in or on my blog so definitely check that out if you want to download this and run it on your machine just to get the full idea okay so we're gonna recreate something like this you'll see I'm using Bulma again I might continue just using that throughout this series typically I'll roll my own CSS because I don't really need an entire framework to use but sometimes for stuff like this where you're just teaching or learning it's very handy let's kick things off I'm gonna jump back to my terminal and kill the server it controls see and I'm gonna actually CD out of that directory into my site's directory which is just a basic where I keep my sites and in this one I'm gonna actually do a rails new and this one I won't put demo in front of the name I'll just do Twitter and we'll go ahead and scaffold that out great so I'll CD into that we can go ahead and get in it I think it's already initialized but I'll do it once more I'm just doing it great okay so the first thing we want to do is think about how this application is gonna work and it's a essentially posts from a user account perspective so before we get into the user side of things let's get the actual tweet functionality done and to do that I'm gonna go ahead and just do this newer command so rails generate and I'm gonna put scaffold in front of what I'm doing and I'm gonna title this tweet with three es and it should run what we need we can scaffold it with the model so in this case what I want is a tweet let's do three E's and it will be text and I'll probably run with that we can add things later so I'm going to go ahead and do that so you see it generated all of our views our controller our model and some migrations to run this so let me go ahead and open this in our text editor and I'm gonna double-check my migration just to make sure it looks good and the DB folder and we have a text entry for tweet on the tweets table we're creating that table as well so we have that we have our controller already scaffolded so the last series I did this all by hand this one is you know doing it the rails way which makes it really easy to scaffold out and get things rolling you can choose to do either you'll notice some new things in this file that return JSON responses which is handy well we won't get into that so much in this video but we will probably in the future so stay tuned but you'll see things that way you talked on in the previous build I'm going to go ahead and double check the model as well we have it there great and then all our views should be all ready to go they're gonna look pretty plain Jane we've got just a table view with some basic styles so to get this to really work I'm going to do rails well clear that rails DB migrating and we migrated that new table in with the tweets entry as well so you'll see that there we can stage this stuff and commit it scaffold tweet great so if I all goes right we can do rails server or rails s whatever you prefer to type and it boots on localhost 3000 this should update to just be kind of a basic site and we're stuck with this default screen so we actually need to update our routes file to include this whole tweet scenario so we can go to our config file and routes we have resources tweets but all we need to really actually do is have a root URL so we could just type route and tweets or we'll do let's see an X we're not tweets index so we're giving the index action on our controller as our root path so we should see all or the front-facing tweets now with this reloaded there we go essentially at its bare-bones we can go ahead and create a tweet and will redirect to the show page which is the actual street tweet itself and we can go back to the index and we'll see all of our tweets you can show edit and destroy so essentially that's that's Twitter in a nutshell you know so it's got that crud model where you were using to create read update and destroy kind of actions on it so we can go ahead and make this look like the app we want it to at this point I'm going to first install a few gems to make this a little easier on ourselves I have a few that I used in the last series that I'm going to use in this one as well we're gonna start with of course better errors I'm gonna go grab these from rubygems just so it's easier gems and if you're following along you can probably just copy my gem file and put it inside yours and run bundle install and you'll be in good shape but I'll show you if you're doing this on your own and you just want to follow on along just to get the feel for things then this is how I'm gonna go ahead and do it I already know this is only gonna be in my development environments I'm gonna put that in there I also want to use guard in my development environment guard live reload so I need guard to run live reload so I'm going to download it add the gem file add it to the gym file should say the same for live reload there it is so we want to add that one as well and before I get ahead of myself I know I need to initialize with a guard file so I'm going to check the repo on this one just to double check I'm doing things right and I also want to add this to our string right after that so require false and I'll run this before you do you run that command though I'm gonna go ahead and run bundle for good sake just get those actually installed and it's double check it's here we have guard guard like live reload great so I can go ahead and run this now which I copied from that repo which might give you a warning it might not so I went ahead and edited that file all right added that file it's to our project now you'll notice it go up over here we should be able to keep it as is for now and on top of live reload and guard I want to add Bulma so that is going to be honor actual dependency not a development dependency so I need to go find that one oops I think it's the rails on Rails yeah get that one and we'll go ahead and add that to just the next one down on our regular dependencies and I do need one more which we will get into or actually I need civil forum too we use that in the last series so let me grab that simple form copy that and go back over the same thing and I'm gonna go ahead and install those two for now because there's a bit of setup we have to do something to bundle once more great for boma I know I need to import in our style sheet assets style sheets and application at CSS rename that to s CSS and I'll actually delete the scaffolds file because that's gonna conflict with some stuff that was generated when we ran that initial scaffold so we'll do at import you need to verify that I'm gonna star my server and just double-check that it worked just to see if the text formatting changed on our server and if it did we should be in good shape it didn't ok great so balm is all setup simple form requires a little more finesse to get working let's go to its home page we need to run a generator which is this rails generate command oops ok I'll click them turn down my server rails generate simple form install if you're using bootstrap or foundation you can throw that flag at the end so it looked like this if you can spell it something like that I am using Bulma so I'm not gonna use it maybe they'll be a ported version of all know soon who knows but there isn't yet so you can run that and it should be all set we don't need to run any migrations or anything it just kind of adds some templating for us so when we create new forms everything's kind of set to go one big thing you might consider before you run that generator in the very beginning if you're if you're watching this and haven't done this yet if you happen to install simple form first on all these gems it will automatically convert all your forms to simple form so that's a really cool approach if you know to do that beforehand chances are you don't always do that beforehand so in my case right now I didn't so I'm gonna go ahead and have to change our forms to do what we want a little more typing but it's ok all right so we have that one last one I believe we need is gonna be called a Gravatar image tag so I'm gonna go back this is just kind of a handy way to display a Gravatar in a sense someone putting together a sweet repo of you know how you can just input the users email and it's all ready to spit out everything you need at any size you need so go ahead and add that and then our final one and the big one of this big topic of this video is going to be one called devise which is basically a really convenient way to have users on your site as opposed to doing it from scratch which can be very verbose and complicated so devise is your friend in that regard it's very customizable which is great so I'm going to install that and it comes with some setup as well so we'll go ahead and run bundle at this point and then I'm gonna go ahead and configure device I'm gonna go to the home page again and there's quite a bit of documentation here devised you can do a lot with it you even do social sign-on with it there's extensions and tons of documentation on how to do things so definitely check it out someone use this generator like we did in the past with simple form and it'll walk you through or give you a step process of things you should probably consider doing before you move on so we're gonna go ahead and add this line to our environments development environment as it says here this just sets a local host default URL for our mailers if you happen to do mailing locally this is kind of how that ends up routing so we need to set that up cuz device does do all the mailers when it comes to signing up or user or are doing the lost password kind of thing if you're familiar so we need to go to Figg environments development and you could just put this anywhere I'll just throw it at the bottom and maybe just put device default Braille great so the next step is to make sure you have a route which we do so that's already good to go we do need these things called notices or alerts in our application basic file I already kind of have something implemented that I'm gonna use just to show you guys how this works combined with bulma so I'm going to go ahead and start implementing some actual code at this point and we'll get that going so I'm gonna go to my views layouts application and here we have just a basic file or working with and you can kind of tie into rails when it does these notices or alerts and to do so you can do an if statement and type flash notice oops I can't type today so we'll in that just to end it make sure we do and then inside I'll add some Bulma classes so this will be notification is primary I think I added one just to target both of these on my own for custom stuff so we got event doing some handiwork there and then inside I'll just put a notice P tag and in that will actually be the notice so we're doing this if statement simply because I don't want this this div to display it's got some padding on it and if it were display on its own without the actual notice present because that only returns if there is one we'd see these bars of color at the very top and that would be ugly and kind of confusing so I'm going to do one more that's actually for the alert so this is if something goes wrong or you're locked out a very account or something like that kind of the same scenario so we'll do notification is danger this is Bulma global notification and we'll do the same thing at the P tag alert this one will call our dope and these are what you can copy from that command line thing it spits out if you want and then I will add alert with the equal sign on the rails great so that's essentially gonna handle some statements of when the user logs in logs out we won't get into straight immediately into the user log in log out stuff yet but I do when I finish this step process that devise gives you the next one number four is to copy views for customization to your app I'm gonna do this because by default a lot of the forms are messed up with our boma install going on so I probably won't walk through each view verbatim I might do some copy and pasting but it's essentially just adding some classes and markup to make stuff look pretty so we'll see how that works in a second I'm gonna go ahead and run that generator though so rails we can just type in or you can copy and paste it let's do fuse and it should generate quite a few views you see how many there are it's pretty nuts so great I think at this point we'll add everything and we'll say installed application gems in dependencies I think that's how you spell it kyoool alright so you get status I think we should be all good yeah clean okay so at this point I'm gonna do a rails server if I can type I'll go back to our root directory which will actually be here and we've got everything going at this point next we want to essentially add some markup to make this thing look like it should so I'm gonna start there and start on application layout to go with since we just kind of ended there I'll start with a nav as info in bulma typically means it's going to be this blue color which is I don't know with Twitter the real Twitter that's kind of close to their brand color so I went with that you can use whichever you want so this logo we're gonna have here is going to link to the root and we'll just give it a class of nav bar item and then we're gonna make a block out of it because we want some content in between that's actually more markup each one and then this will have a class of title and then I'll throw a kind of a sizing class on it is five and we'll give it the title Twitter with three T's okay and looks like I'm just missed a bit there it's got that I missed one div that should be here now far yeah and var brand and this should wrap this entire thing and then below that we need to actually have this hamburger icon and Bulma comes with I'll go ahead and type that in you can go ahead and either increase the video speed or just fast-forward if you don't want to watch me do this and our actual nav is going to have this this is the part that wouldn't if we're on mobile it would probably truncate and kind of collapse similar to bootstrap if you've used it the same with foundation it's kind of a common pattern and you close that div and got quite a few things here we'll start with day of them you have all the way to the left or right side excuse me on that bar and and we'll do a field this is all bulma stuff you the new tweet path is an actual built-in path once you have these routes generated on your project so I'm gonna go back into CD Twitter and if you run rake routes at any time in your project it will spit back all those routes in the sense of you can have one that is new tweet edit tweet the tweet the route path which we've put and it tells you what action it goes to on your controller and the URI pattern so in our case the new tweet underscore path is the URL we want straight to that path so you just add underscore path to it and it should be all set so you might seem more things like that as we go that kind of explains it I hope so that's our nav the rest I think is is gonna yield within the body in a container so let's see what our sites looking like this point on defy local variant new tweet path I forgot an e so let's go add that there we go okay so it looks like there's issues here with this button I might have forgotten a div okay we'll come back to that it looks like there's an error with the sizing and where these things should be going I do have some styles that I had to add to make our logo look kind of how we wanted it it totally wasn't much so I'm gonna go ahead and add that stuff just to get it kind of in place some of it uh style sheets or application style sheets all right so I wanted to do this as nav our brand title I'm just doing it in the main route application because I really haven't needed to add tons of styles to this app we may do something more like that in the future but I'm not really the focus so I later I add a Gravatar that I want rounded it doesn't run in the corners by default so I'm just gonna add that now and we need the image as well just for safety sync and this is sass so if you're in a CSS file your mileage may vary here I think I don't need this but I'm gonna add it I do I do need this something remember so that's all I need as far as CSS goes are that all that did really that you'll probably notice is makes our logo white oh you know what I need to run guard on our project so I'm gonna run bundle exec guard so it compiles our sass and does everything it should be all set I'm gonna go ahead and go to live reload I think it's on nope no it is oh you know what I did it's called navbar brand we should be good there we go haha okay we have that in place let's go to we scaffolded out our index page and this is gonna be in essence where all of our tweets are gonna be at so I'm gonna go to that page do a little bit of markup we've got our application to a decent point it looks like there was a little bug going on with it but we'll come back so for this page I want to add a section and we'll call this the client section give it a container class so we want our containing stuff to not hit the window and we need to give it a columns class cuz I'm gonna wrap some of this containing stuff so in the middle we're gonna have our feed and I actually make a partial with this one so you can you can make a parcel at any time and render it into another page and rails so to start with I'm going to do so render and feet and in that feed file I'm gonna get honestly get rid of this stuff start there and I made that file in that file we want to add quite a bit of content first is the left column so since we have columns with boma within that it's based on flexbox so any column on the inside is gonna flex to that container because that's positioning flex so if you think about that we can do columns or column excuse me and then just is half which is half 50% ish so I forgot that dot and that let's keep that for now for well we'll kind of make a makeshift if the user is signed in thing going on so we'll actually add into class media you okay and then we want to display all of our tweets as well so let's start there and with rails will do tweets dot each do tweet and we're pulling tweets from our controller the index action if that makes sense in this for now then I'll show you what I'm talking about so in our controller we have this tweets symbol and from that we can access all of our tweets basically I'm going to order this though and it's going to be you can query it order create it at and then just throw in descending if you want up to you how you want to order it okay and then we'll go further into our feed and actually kind of build out what a typical tweet will look like you and just for safety sake I'll put brake tags and then we can finally put our tweet which is going to be this tweet since we called it tweet it actually this is another one of those poor naming conventions but I understand what it means essentially our column in the database is called tweet but we're querying it for the tweet if that makes any bit of sense since we're using the same name here we're grabbing it that way ok so to test that out we can see what's going on it looks like I have something wrong here sweets oh I forgot this part we go ok so we kind of have some stuff going on here it looks goofy but we need to still add another column so it looks like what we had so I'll go ahead back and add that and then let's see we're still in our article here after the content we want to add actions basically on the tweet like if you want it to like it or should go to the tweet actual permalink or delete the tweet you can edit the tweet if you're logged in kind of thing so I'll start doing that you I'm gonna add some icons following along you do need to add the icon font awesome library to your application I need to go grab that URL so these won't work immediately but we'll get that to work okay so we have that done before I forget I'll go grab that trip to our layouts file and I'm just gonna install it this way however you install it is up to you but this is probably the pretty easiest solution I'm gonna open my actual project up just to grab that URL cuz it's pretty long don't want to actually grab it so you'll probably get it from some CDN of some sort or somewhere and rails has a stylesheet tag helper in a sense so you can go ahead and add it this way we'll just kind of carry that out and keep that the rails way so essentially instead of the typical stylesheet rel equals stylesheet crap this does that all for you you just kind of pass in where the link should go to so I put that before this one and then after our actual application stylesheet that's something I'm gonna remember keep in mind okay so we're back to our feed I want to add a few more icons that do different actions right now we have this one going to our actual tweet let's add one more that goes to our edit path so we can do I just notice I forgot the equal sign there don't forget that you how about does it we've only want the user who's logged in to be able to do these things though so we'll probably revisit this file of course we whoa because we need to get the users real name and their email are there handle all those things but we'll we'll come back looks like I'm doing the same thing you have to link to tweets is keep throwing in the wrong ease so there we go and while look at the pencils on there there's some stuff going on that should not be oh I know why I didn't in the eye there we go okay so at this point we can link to the tweet there it is and all of its glory we can edit it same thing and delete it if we want so I'm gonna keep it for now and just so I have something to look at and you notice the styles I applied are doing that rounded corner thing you don't want that you don't have to apply those no big deal let's go ahead and kind of probably wrap up this feed file we need to get the other column in our app just to make this look like it should so I'm going to do they go make another partial this one will just be who to follow okay called it that yeah and we'll close that let's make a partial that is called that underscore who to follow which female that ARB and this file is going to kind of carry on the same thing with some boneless stuff you alright guys so we have our Oh widget I would call it that goes to the right of our actual tweets panel we have some layout issues but I still need to add one more to the mix on the left side and kind of like Twitter does if you're used to that so if we go to Twitter so we could use it as an example I should have done this in the very beginning don't know if I'll aww I'm logged in or what but you can't do much until you are logged in so I guess I'll just log in so we have the left side kind of giving a you know interface for your own account and your tweets who you're following your followers and then who to follow on the right some of this stuff I'm literally just gonna kind of mock but not actually code out because that would take me forever I don't need to invent Twitter again but I'm just kind of giving you the concepts here so we have a right side of who to follow in this regard and we still need the left side which I'm going to call trends and I'm gonna put that again on a partial we need to create that file and I didn't mention before but I'm literally just using some static content for the who to follow section I would task you with maybe propagating out with other users if you create more than one after you finished building this app on your own and hopefully you'll see what I mean by that in a second so we've got our feed built I'm on my trends HTML file at this point and in this inside this one we're gonna basically kind of just build up some more of our layout with Paloma you so we're getting there we have our basic layout built I think there we go and it looks like we got a issue with this media box looks like this one is outside of the loop for some reason so I think I might have a flare dev going on in our feet so I'll troubleshoot that in return so guys I figured out I'm jumping ahead of myself and this box will actually be what our form is when we alter tweet I kind of confuse myself there so let me double back and add support for this in this case we're gonna actually add a form to add our tweet so let's go ahead and render a partial again tweets form we actually have our form here you know you'll notice this is generated with rails at this point I actually want to use simple form up to you if you want to do that or not this one looks a little less simple to me so I'm going to kind of copy from my old notes here simplify them for and we'll do at tweet and to SN f as the field and and then inside that we need our if you want to add error notifications and these will display if something with the form is off so we'll do a field this is boma and we'll have just finally our input input which will be our tweet with threes remember and I'll label this tweet about it and we'll give the input HTML a class Luke's class of text area since we want it to be actual not more than one line or yeah text area and comma separate that we don't want a wrapper and this is all part of simple form to you can customize how your form fields look by doing all these things its label HTML will have a little brackets for that I'm gonna go in a rails thing cuz it's bugging me class label and finally our placeholder can be what could it be compose a new tweet like so and we do need our submit button too so I'll add that stop button and submit give it a class why not button and then is info for our kind of brain colors for this project fall goes right I believe I did it wrong let's see I close this file in our feed this needs one more e and keep doing that okay I'm gonna find method model name for nill class so what's going on here is I don't have access to a certain model name in our controller so I need to add that to our controller for the index view and to essentially do this you kind of need to do what you would do on the show or new view so we'll actually do tweet that new because when I create a new tweet I want it to not redirect to the show page in the end but rather to just the same landing page so if all goes right this should hopefully work and I just typed that as well the error notification there we go only problem is I do not see the form so where might that be did I forget to put the equal sign I did there we go so that's in essence what will be the final file that we'll use for our form to actually be creating these fields still a bug in our layout somewhere I don't have us a closing date that's causing this flex box to go whack e so let me look at my elements got columns 1/4 1/2 this should be within that is 1/2 column so let's double check our code ok so I ended this Dib too early believe it needs to be at the very end here let's see what happens there we go see guard was our friend there I didn't even have to refresh awesome great so at this point besides this little hiccup in our application layout file I'm gonna go ahead and call this pretty much ready for the user stuff so in the next part we'll go ahead and start adding the user based roles and I'll clean up this application file offline so you guys can have the right code when the time comes so I'll see you in the next one you

Channel: Web-Crunch

Views: 40,514

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, how to learn to code, how to teach yourself programming, rails, ruby on rails tutorial

Id: 5gUysPm64a4

Length: 46min 24sec (2784 seconds)

Published: Sat Dec 02 2017