Instagram Clone with Rails and Active Storage Tutorial

hey everybody this is baylor and welcome back to the channel and today we were gonna build an instagram clone so let's get started the thing I'm going to do real quick is I'm using if we Jim list and look for my rails installation you can see that I have rails 6 and rails 5 - how we want this video to be done with rails 5 - so what I'm going to do is I'm going to show you a trick - to use a specific version of rails when you don't install so to do this we're going to make a directory and we're gonna make this directory the name of our app and so we're gonna call this Institute and that is because this is tons are better than grams right and so if we're making an Instagram clone we might as well make it better and so we're going to make it insta ton and what we're going to do inside of here is create a gem file and we're going to have the source for this being our rubygems.org and we're gonna specify that we want rails and we want version greater than 5 - which is 5 to 3 but what we're gonna do is bundle install and this is going to fetch our ruby gems and now if we say bundle exec rails and we're going to install a new app we're gonna solve the current directory and it's going to use the name of this directory to be our rails app and we're gonna say that we don't want any unit tests and we want webpack boom so we're gonna go ahead and create this and it's going to ask we want to write we say absolutely do it do it do it do it and so as you can see it goes for an install it installs web hacker and it gets us all set up and all this wonderful stuff and it takes forever because it's installing node modules and if you don't know anything about node modules there's a lot of them I suppose that's not very good answer it's not there's a lot of them that is absolutely true the problem with node modules to set there so many of them used as dependencies so you fetch one there's a good chance you're gonna get a hundred and then that hundred is gonna get a thousand and one of those thousands going to get a million and and suddenly you have more packages for a small app the and the entire Apple organization uses to build my desktop computer you see in front of you okay so it's finally done and it finally for me is different than this shoot for you because probably happen pretty quick for you but if we look at the directory you can see it's initialized to get for us because rails does that because rails is awesome and what we're gonna do is just we're gonna add or get ignore file we're gonna say we're creating a project and then we're gonna add everything else and we're gonna say we're adding rails cool and what I want to do real quick is just hop over into another pane I'm going to go into that application and I guess I'll do one more thing we're going to say yarn add bootstrap and this is just so that we can have a nice theme for application but with that don't what we can do is say rails s and then we're gonna come over here and I have to go back into this and I'm gonna say in web pack dev server and now we're gonna open this path at localhost 40,000 HC which says we're on our rails installation with rails 52.3 okay what we're going to do here so we're going to change this up to be an actual Instagram type application and so I'm gonna hop into my layout from application and I'm going to do also hop into my style sheets for app asset style sheets application I'm gonna rename this file to be as CSS the sass file and I'm going to import bootstrap sass bootstrap cool and then I'm gonna hop in I'm just like jumping all over the place I apologize we need to add a root root and this is going to be for our pages home we're gonna add a controller for a pages controller we're gonna call this pages controller and here some application controller and we're going to define an home action cool and then we're just going to go into our app views pages slash home to HTML that be and inside of here we're going to say this is in to institute on because a ton is better than a gram perfect and so we refresh the page you can see once rails kind of catches up you can see it's loaded application and you can see we've already started loading our bootstrap styling so what we want to do now is hop into our layout for the application we're gonna wrap this in a container and boom it's starting to look like an app and what I want to do is time-lapse myself adding the navbar here because you don't want to see all that and it's pretty boring boom alright so as you can see we have a navbar here gives us a little bit of look for what we might expect an application to have with some navigation and an action item button and the thing we want to do is add user profiles and what we're going to do that is we're going to use the device Jim and so we'll do is we're just gonna go into our Jim file and we'll come to the bottom we'll add a device reference bundle install we've got device and what we want to do is say rails G device install and this has done a lot of stuff ok and the next thing we're going to do is we're going to say rel Street devised views and then the last thing we want to do is generate our users will say rails generate devise user and we're gonna add a username a first name and a last name and we'll go into that migration so create users and what we want to do is just make sure this can't be no on all three of these and then we're gonna add an index to users for the username and we'll try to match this and say unique is true and now weeks everybody be migrated and then we want to do is hop into our user model and we're just going to add additional validations for the username it has to have a present so true and it has to be unique and we're gonna validate our first name for presence it will validate our last named for a presence perfect okay as you can see it goes just not anything different it shows us an actual error and to do this to fix this we just need to restart our rail server because rails doesn't auto reload dependencies as we add them so if we refresh now we're you're gonna see this works perfect and what we want to do is that reminds me that I want to pull this like so I like my route route at the top what we need to do is add some session management links over here so we'll do that and what we're going to do is go into our layouts for application and below this under this navigation we're gonna add a nether one okay and as you can see I've added these four links we're basically having a flag if we're signed in then we show the current users with their full name and the logout link and notice that we are calling this with method delete and so that is so we can't log out by making a get request and we're using the magical device destroyers recession path and then we have our sign in and our create an account button so if we refresh you can see we're not logged in so we need to create an account and if we look at this form that we've got so we need to fix that real quick so we'll do that but going to our registration new view and let's style this to make it bootstrap Pete so check it out we have a forum here and if we fill this out real quick when we sign up you can see we get an error that says all our fields are blank and yet you saw me fill these in and so the reason for that is if we look at the devise documentation we are gonna see this area here that tells you how to deal with strong parameters and so we basically just need to copy these few lines of code into our application controller so let's do that real quick and on our signup keys we have their username our first name and our last name so if we try this again and I refill this out if we sign up again you can see we get logged in and we know we do because we're inside of this user signed in but we don't have this full name method on our user class so we'll add that by just going into the user class and we'll come down the bottom and define a full name and it is taking the first name the last name and joining it with a space we refresh the page now we have our username and our logout link if we log out and see it takes us out if we go to the sign in page oh we have another form to do so let me do that one real quick as well so we have a login form that now looks pretty much correct and we login you can see that we get logged back in so we have all of our device looked up and we'll commit them so the next thing you need to do is add our uploading and so it will do for this is we're going to generate a new model called image and we're going to say this belongs to a user and we're also gonna say this has a description and it'll just be F type text so we'll create this and we'll just go into our our create images migration and we just want to make sure this is not knowable because it is required and will do to be migrated and the other thing we want to do is hop into our user model and we just want to say this has many images and so that sets up our whole schema and so what we're gonna do real quick it's just we want to wire up this upload button so we're going to define a couple of routes for this we're gonna have a get to an upload route which is going to go to images new and then we want to add a resources for our images now we're going to say this is only for the index the show and the create actions and so if we go back to our layout where we have our upload link we want to change this to upload path so we refresh you can see if I click on this it takes us to upload but we don't have our images controller so we'll define that app controllers images controller dot RB and this will be an images controller in here some application controller and we'll define a new action and this is just equal to image dot new and we'll go ahead and define our create action and because we're using strong params we'll define this private method here and we'll say this params require image and we're going to permit a an image to be uploaded and the description to be tagged and we'll do for this say image oh this is not plural and here we're going to use our current users on images dot create we'll call that build actually and we're going to pass in our image params will say if image dot Save then redirect to the image path for image with a flash message if we add this and if we fail the we're just covered under the new action ok so this is our full controller but this doesn't fix the issue because now we don't have our view so we're going to go to app views images new to H go to our ear B and we're going to create a file that says upload image or a heading so this is starting to come together and we want to put this in the center and so we'll just put this inside of a row with a width of 6 and offset of 3 and what we want to do is have a form for our image so we have this form but it doesn't look very good and primarily because today when you upload images you don't expect to see a file filled like this and so what we want to use this active storage and we're going to use the active storage drag-and-drop library to make our life easy ok so what we do is we just hop over towards gem file super simple and we're gonna say active storage drag and drop and if we fix that and we bundle and now we just go over and restart our server just so that we have this gym loaded we can go back to our forum and we're gonna change this from file field to drag and drop file field so when we refresh we get an error and it says we don't have an image for our image and to do that to make that work we're gonna hop over to our image model and we're going to say has one attached image and so now when you refresh this is gonna link our image model to an active storage image object and it almost looks right because that file disappeared but the problem is we're not loading the CSS and the JavaScript to actually make this work so what we're going to do is we're gonna hop into our app assets JavaScript application at j/s and we're going to require our active storage drag and drop and then we're also going to hop over into our app asset stylesheets application sass and we're going to import that active storage drag-and-drop here as well is when we refresh you can see we get this beautiful box but and we put a file in it you can see it shows us something but it doesn't look very good and the first thing we notice is we don't have any text and that comes from the second parameter so we can say drag and drop your image here and so now we've refreshed we have our text but it still doesn't look very good and so what I want to do is grab some CSS that I wrote earlier today and we'll just hop over into our sass file I'm gonna paste that in here and it's just a bunch of stuff like make it different colors and add a different border on it and we align these pending items so now if we refresh and look at it you can see we have this box that looks a little bit more presentable and if we drop our file on it you can see we get this enormous piece here but if I grab a smaller file then we get to look like this and the other thing that I did earlier today that I think is pretty cool is if we go back to our view and we come to the bottom we had a script tag I added this Java Script to it and what it does here is we initialize a file reader we grab some of our Dom elements and what we're doing here is basically saying that when we initialize a new file we want to read that file and make that the background image and likewise when we remove an image then we delete the background image and so if this done when we drag a file over here you can see it kind of fills in the background some give you the feeling that this is the file that you're uploading so it's pretty neat and if we delete it likewise it goes away so this is some cool code that you may actually want to use on your application because obviously you're not gonna use this application for you're not gonna create in us a ton I just pretty sure that's not gonna happen okay so if we do this now we grab our image and we say and if we post this image oh we got an error and how do we keep ugh these errors because this is something I actually did earlier today we're gonna grab this image we're going to do it again post we got our network tab it tells us we have an error for a direct uploads and rails actually tells us what to do we've run this rails act storage install so if we do that you'll see that copies of our migration and then we'll say where else to be migrated so now we refresh and we try this all over again so I'll grab this and we'll say you post this you can see that we get in here no images that save I can't believe I did that why didn't nobody tell me we got in the comments if you saw that in the comments you should post below and just let everybody know how much better you are than I am it's seeing stuff like this so where is it here it is so we'll resubmit that and we get redirected to action that does not exist so what we're going to do is just hop up here and we're going to find our show action and we're gonna say image equals image dot find params ID perfect so refresh and now we're going to miss the view so we're go to app views images show to HTML right here B and we're just gonna post and say viewing an image that's probably necessary what we're gonna do is just make a two column layout cool so here's our two column layout and you can see that when we want to show an image all we have to do is reference the image object with an image tag and then as you can see we're gonna have an error because I've referenced this profile path which I haven't created so let's just define that route even though we won't actually have it and what we'll do is say that we want to go to slash username to user show and s profile cool and if we go back and refresh you can see we get this beautiful application where we can see the image that's been uploaded with the person that uploaded it if we click on it we get an error where we can't actually see the user controller so what we need to do is first go in here and say this is users plural then we're going to go into this and we'll define our show action and we're going to say user equals user dot fine by prams ID and we wanted to find our images and this is equal to our user images order and we'll order by be created at descending and we'll do some like limit fifteen or something like that and so now if we go into our view for our users we can define out we can show our user full name here and then what we want to do is to find a partial here that works a render and we'll call it shared images and we'll assign images to the images variable here and we'll define that at views shared slash underscore images to a smiley Eric B and we're gonna do here is just define a card columns here this will give it kind of a Pinterest type grid and we're gonna call on our images each going to grab that image we're going to find a card here and I'm going to give this a very small amount of padding and what we're going to do is just put out our image tag for our image dot image and we're going to give this that same 100% width and then what we're going to do is output a link to view the image which will go to an image path for our image ID and what we're gonna do here is just give this a button of secondary and what I'll do here is call stretch link and if we refresh and view this Oh can't finally use without an ID oh my mistake in our users controller this is fund by username perfect and on our user show need to fix the case on that no images hey Lorraine perfect and this did not do right shared it would help if I could spell correctly and as you can see now the whole area here is a link if we click on it it takes us to that image perfect and what I'm gonna do here is just add some origin bottom like so maybe make it fit perfect cool so we have a card and if we come over here and we upload some more pictures and we get some more over here and we go view the user profile you can see it starts to fill it in and what I'm going to do is create another profile and start uploading more images and so we go to look at Bob's profile oh I never fixed that link up here so we'll go into our application layout and over here for this route path we'll go to profile path for our current user username perfect so if we look at our profile you can see our images and we switch over to Baylor's you can see his images and so what we want to do is have this recent link up here show us a culmination of everybody's activity and so what we're going to do is come up to this recent and we're going to change this to our images path and then we'll go to our images controller and we'll define index on here and this will be images equals image order by created at descending limit 15 and we're just going to go into app fuse images index.html dot RB and we'll say recent uploads and here we're just gonna render out that same partial with the same type of images and if we go here to the recent page you can see we get to see everybody's uploads and if we click on one then we get to see this as Bob Wiley if we click on a different one you can see this is Baylor and we can see Baylor's profile so I want to thank you for watching this video and I will see you next time

Channel: Baylor Breaks It Down

Views: 4,798

Keywords: ruby on rails, active storage, ruby on rails tutorial, javascript, web development, html, web design, javascript tutorial, bootstrap 4, bootstrap 4 tutorial for beginners, instagram clone, photo sharing website, image upload, drag and drop, joshua fluke, code bootcamp, developer interview, bootstrap 4 tutorial, bootstrap tutorial, web developer, bootstrap, css

Id: YIpg3-jffMI

Length: 22min 33sec (1353 seconds)

Published: Wed Jul 10 2019