BUILD AN INSTAGRAM CLONE [PART 3] RUBY ON RAILS TUTORIAL

welcome to our third video on how to build an Instagram clone and I just want to say before we get into this video if you enjoy this content do like this video and subscribe to the channel as I will be building a lot more MVPs in the future so just to recap on our progress in the last video we got to the stage where we can follow users and have them follow us back and we can create posts and like them and we also have a profile where you can see the posts that we have made but the first stage we want to look at in this video is adding comments to posts so we want to add a field at the bottom of each post where users can enter some text submit it and then we will show the post so an Instagram we can see this field here at the bottom and then they have this text above where the comments will show so let's let's jump into that first and make a start on creating our comment section so the first thing we are going to do is create our comments table and we will use a migration to do that so our comment will reference the post that is connected to and we'll also add some timestamps to see when the comment was made and then we will have a string field for the text itself and then finally we want to reference the account of the user that's leaving the comment too so let's go ahead and run the migration and let's go and set up our model so we can do that manually or we can use the rails generate command and we have this message about the migrations we'll just skip that and now within our model we will set up the relationship to say that this comment should be belonging to the post and we'll add some basic validation here of the fields that we have just added to the table within our post model and we can say that the post has many comments and we can go ahead and remove this total likes method for now and we will copy the code from the posts controller and quickly set up in your controller for comments let's paste this in and just quickly change the values so one thing to bear in mind here is that we will not need a new view or a show view for the comment itself as this will be shown once we are looking at the post so the only thing we need in here is the ability to create comments and possibly you could add the ability to delete them also but for now we will just have this create method and we'll just go ahead and update the values in here to redirect us back to the dashboard after a comment is created and depending on where you're leaving the comment from potentially we could also redirect back to the post itself but we may come back and do that later for now we just want to get this working so now we can add the routes for our comments now we could add just the create method or potentially you could add the destroy method here too but for now we will just go with the create method on the comments so that's only that path that will be set up for us so back in our feed of posts let's go ahead and add the form which will be used for creating a new comment so in this form we were going to need a submit button we are also going to need to embed Li post ID and then we will need a field a text field to allow the user to enter a comment so let's add the hidden field for our post ID and we forgot to add our form builder so let's do that quickly so after submit and let's just rename this to our post ID and then we can remove these classes they're not necessary now so let's add our text field now and then we can try this out you so now we need to set the value of our comment so we can do this in the controller so let's set this as comment new and that should work and we're seeing this error message about merge undefined method merge and it looks like we've missed something in this statement so if we hop back into our view again and I think we forgot to add value here so that seems to have fixed that problem but the styling of our comment form looks a little bit funny right now however the value seems to be set for the post ID so this figure out how we can style this up a little bit better and the first thing we can do here is pad this box out a little bit set a background color and okay and then we can set a border as well so we'll just copy that from our post details class about and already it's starting to look a little bit nicer but we would like to really get this comment field to fill the space better so we'll try adding a class that is part of bootstrap and it's still not quite right but what we can do is we can put a class or a a div around this and we will set it as a multi form field so I form group and let's give this a try so you can actually take a quick look at bootstraps documentation to get the right code to put in here so I've kind of forgotten how to do this a little bit so I'm just double checked on their documentation and we can just grab this code and paste it in so we just need to change these class names around a little bit and now it's looking really nice so the only thing I want to do now is remove this kind of glow effect from the text area or the the text field so let's add a class here so we can grab this by our CSS file so we will try to remove the glow from this field now normally removing the outline via CSS solves this problem but in this case we're gonna inspect the field to see what's actually happening so we can force that to be a hover state or a focus state and if we scroll down here we can see that you know there is actually a box shadow being set no I think that's default from bootstrap so we can try and override that by setting that to none and there's a quick solution for now we can add this important to the end of the CSS and we can see here now that the the outline is disappeared so it's starting to look a bit cleaner and nicer now we're getting this message about post ID unknown attribute so I guess we need to just double check our schema to see if we've created that and we can see here it's using the plural form of posts ID so we've made a mistake in our migration so we can roll that back quickly rake DD roll back and let's modify our migration file so take off the S at the end of these and run this once again and this time it should work and it has gone through so now we want to display the comment after we create it so I'm just adding some additional comments here so that we have something to see once we create as view now let's go back and yeah we can see here from our server logs that it is creating lis the comments successfully so let's just close down some of these files so I can see more clearly what's going on here so going back to our view then we want to display the comments that we made so to do this go create a partial and render that here so we'll create a comments partial within the posts folder and let's set this file up so in here we want to look over each of the comments for that post so we can do that using post comments because we have set the relationship up within the model so the post has many comments so they should work automatically but we can't actually pass in the post as a variable in this case so we could reuse as comments this comments file or partial in different places within our application so here we want to display our user name of the account and also the comment that they have made so let's make this filled and bold for our username we're getting an error here so it doesn't seem to be recognizing the post variable we're passing in I think we forgot to include the word partial vendor partial but we can remove this locals and this should work without that and we're getting a different issue here this is about the account so we haven't got a relationship and the model set up between the comment and account so we can add that and see if this fixes it and indeed it does so now we were seeing our username and post but it also appears to be printing out this array of posts so let's remove this equals on the loop and that should fix that and now we want to style the comments a little bit so that they are there's some kind of line break there or spacing between them and that's looking a lot better now and we can compare this to how it looks on Instagram and it's looking pretty close now in terms of layout so it's quite happy with that so far so let's sign in with a different account now and leave some comments on posts and see how it looks with different usernames so let's add a new comment here and see how it looks so that's working quite well now so let's just taken us ten minutes to set up comments and I'm quite happy with the layout so going back to our profile now what I would like to do is make the edit profile button a little bit more like the Instagram version so it's just a light border around it and a clear background and also I'd like to have this hover effect on the images and have this side scrollbar type feature and comments at the bottom so these are what we'll try and build out in this video and we could also have this icon at the top left something to make it stand out a little bit but first thing we want to do then is have a look at this profile so let's go ahead on style up our edit profile button a little Furler and we'll try to move it to the right so that's not underneath the account name let's float this to the right now it's a little bit wide at the moment so we can set a max width on this so the layout is starting to look pretty good right now but there's update the styles of our button so we can add a custom class and to style this a little bit differently from the normal good strap buttons so let's make our background of the button transparent and then we want to add a border around the outside and then we can also add a border radius to make the corners of the button rounded and it looks like our Styles haven't taken effect but we can override this temporarily now we could actually put a ID on this this button and that would override this without using the important rules but it's okay for now as a temporary measure just for this demonstration so our button is starting to look a little bit nicer now and we can also add some hover effects on this when the user puts their mouse over the button set a background color and another thing we can do is the top navigation we can make that white and too much Instagram so right now we have this dark color on it on the top navigation so just by changing the class names here we should be able to get this so the moment its navbar dark but we can change that within our layout so now we have two white navigation at the top and if we compare this to Instagram we can see that there's a border underneath and there's a little bit more padding on the navigation area so let's do this just try to make it very similar to what we see on Instagram so this is starting to look pretty good right now but I think we can still increase the padding a little bit here space this top part out let's looking very close right now overall I'm quite happy with this let's add in an icon the top left of the branding bar nav bar brand so we'll add a fun awesome icon here and see if we can make this look a little bit more professional at the top so we'll add a class for FA Instagram and see if that works and I think this isn't working because we don't have the branding stylesheet included now we could add that but I think we don't necessarily need it right now but what we can do is have a replacement icon there so we could use something like the hashtag and I think in this case the hashtag works fine for this is MVP so remove that line and I think it looks a little bit better now so we need to tidy up this top right section little further so you want that name to be directly under the username so let's move this full name up into the same paragraph tag and we'll add a line break we can try to float this image to the left so that should pull the text up to the right of the image and then we will just add a margin to the right so we can add a class for this but we will need to set the style to add that margin normally when I build applications I will have a set of helper styles that allow me to do margins and padding on top left right etc but in this application we haven't had a die yet so I will just add the style for this really quickly so we're basically just having this class that does the margin to the right and it's looking pretty good right now we can tweak it to make it a little bit larger and one thing I want to point out is that the logo on Instagram if you click on it it will go back to the dashboard if the users signed in so we want to add similar logic to our application to do that so we can set the path based on the user's login status we can use account signed in to check if they are already signed in and if so then we will return a different path so that would be the dashboard path otherwise we will return the application root path so if the user is signed out in this case clicking it should be taking us back but there is something going on yeah so we forgot to add the equal sign here so that will print this path out and we test that now and it is working so the next thing we want to do now is have this comment button and working so on Instagram it takes you directly to the show view of the post so we will do the same thing we will have it pointing to a different view so I'm just gonna copy the code here from the feed view and we will set up a new show view so this will be for the post itself one single post so we want to set up this sidebar with the description and comments so this clear this up a little bit and take out some of the unnecessary things so in the sidebar then we will have this this comment box will move this down so the left column will just be the image itself so we can take out this section on the post meta so get rid of the username and that will come down into the right column paste that in the top just clean this up a little bit and we don't need to iterate over multiple posts so this will just be a single post you can remove that and we can add a check here to ensure that the image is actually set before we grab that URL for this image tag so for each of these cases where we have the post we need to change that to an instance variable as we are only loading a single post here I could do a find and replace on this but I think we can do this quite quickly so we'll just just update this manually so now back in our posts controller we already have the show method here but we need to add a way to load the post that we are viewing we will create a set post method and we will load based on the parameter that's passed in from the URL and we will add a check to see that the parameter exists before we try to load that post and finally that's a day before action to load the post on the show view and finally then on the post feed we can add a link so that when the comment box is clicked they go to that show view and in this case we can create a link as a block so let's try this out now and see if it works and we need to make a minor correction here to use the instance variable in the show view so we must have missed this on one or two places so line 16 update that and again on line 20 and this time we're seeing a different error it is because we have not set the comment on that show view let's do a comment dot new and now it is working and on the right we can see the sidebar with something similar to what they have on Instagram so we've got the user the description and some comments underneath but we should really add our buttons to the bottom we currently have them at the top of our sidebar so let's move that down you and on instagram we also have the scrolling feature if you have multiple comments so we'll add that as well but we can do that by setting up a new div and wrapping that around the comments partial that we're loading and then within the stylesheet then we can set an overflow to to force a scrollbar on that do so if it's more than 300 pixels it will have to have a scrollbar so let's test this with a smaller value to see if we can force that scrollbar and here we can see it working for the first time now this won't really come into play until we have more comments but also one thing to note there is that they have this time ago since the comment was made so if we jump into our comments we can add that so rails makes this really easy they have a function called time ago in words and you just pass in the created at date on the on the model and as you can see now we've got five days ago each of these post seven days ago so now that we have this in place we will go and move our post actions down to the bottom I will need to add some spacing between the buttons and the comments area so we can add a class on to this section to use within our style sheets so now we can add a border to this in CSS and we can also add some padding and margin to to give a little bit more space in the design 20 pixels padding and margin top so that will be above the line to give some spacing let's looking a bit better now so if we compare our page to Instagram we can see the Instagram the whole section is scrollable including the description so let's try to make ours work in a similar way so now that whole section is scrollable and we can change the height on that scroll window so on Instagram when you click on the comment icon it actually selects the add a comment field and on the heart icon it goes red once we click on it so this makes them up gets here to handle the functionality in the same way so let's begin with the comment icon we can add an ID to this so we can select it within JavaScript quite easily you now we also have this username underneath the likes in the right-hand column but on our design I don't think we need to have that so we can take that out and then within CSS we can make this comments area a little bit taller to fit the screen and now we want to make our comment field or a comment icon select the comment box once it's clicked so this should only happen in this view so within the show view so we can use the post comment ID that we've created and then we need to have a way to select this comment field so we can add an ID to this but normally in Ruby on Rails when you create a form there is an ID added by default so in this case it's called new comment and even if we look at the comment field itself it has a different ID set that it is comment underscore comment so we can use that directly to select this field and now we want to focus this field so use a dot focus to select it make it clear for the user that they need to enter the comment so now let's highlight this like button red once it's active so we can do that by changing the CSS a little bit so now this is starting to look good you have the highlighted red heart icon and finally we'll just test another comment here and you can see that it takes us back to the dashboard and then if we click on the icon again it brings us back to this show view which is working how we want it right now so now on the profile we want to have each of these posts linked back to the show view so you can click on the post for more details so let's add a link to the front of this image and you can see now that we can click through on each post so now we will add an additional field to the comment form and this will only be on the show view of that post so we want to be able to return the user back to the post relevant and taking them back to the dashboard that way the user can automatically see the comment that they've made so if we go in here now to our controller for our post controller and we can set the return URL based on the parameter that's returned to a parameter that we've created so there's a hidden field on the form and if that value is set then we will return back to the post itself we have made a little bit of a mistake here we should be putting like code into the comments controller and not the post controller so it's just update as quickly so we've just pasted it in and now we can test this out now it appears to be still taking us back to the dashboard and that is because we have not set the return URL as a white listed field you can see here on our server log that it's unpermitted parameter what we can do for this is we can actually set it within the model we can use an attribute accessor so this will basically allow us to pass a value for this return to field but it will not store it in the database so we don't have a value of flat in the database so we don't want rails to try and save that to our database so let's try this again and this time we can see that a return to is actually within the comment parameter so we need to wrap it in that comment parameter and less time rails is complaining that the post has not been set so we can just change this to comment at post id and that should work and this trial is once again and this time it's finally working for us so we got there eventually let's try this out on some new posts and it's looking pretty good right now the next thing you can do is we can have this hover effect on the images on our feed and we'll have a comment count and a light count in there so let's go and set this up now for comments so we can copy this code here from our like model and use that as a way of increasing and decreasing the comment count so let's change these values to total comments count for both of these methods and now if we go back to our profile we can add some additional information to each post within this loop we want to show both the number of comments and the number of likes so in here we want to add a icon for each of these and we can do that using fun awesome again but first I'm just dropping in the total likes and total comments so we've wrapped these numbers in a div with a class of post stats and what we want to do here is give it a maximum width and height so that it fills the entire image and then we also want to set a semi-transparent background now we can do that using RGB a a B and the Alpha so we set that to 0.5 and that will be about 50% transparency and then we will change the color of the text to white and we need to center a line not text vertically as well as horizontally so it needs to be halfway up the image and to do that we will create an additional div that will sit inside our post stats div and we will call this dot inner and we'll use a margin on this to try and push it down the image now we could do something with flexbox here but let's just try to do this really quickly keep it very simple another thing to note here is that the images are square on the Instagram profile feed and that makes it easier for us to do the overlay so we will also make our post square and we can do that by adding a new class here and then we will set additional styles in our style sheet so to do this quickly we can set a height for our image and we can set the overflow to hidden so that will just be cut off at the 290 pixel mark in this case and we can also set that width to be the same size and what we can actually do to give us a little bit more control over the image is set a style and embed the images a background on this div and I think this is how it is done on Instagram and you will inspect the element it is actually a background image that is attached by a CSS so we'll just add some additional Styles here to prevent image from tiling and we just want to centreline the image so within the CSS we can force our image to fit the size of the do and we can do that using cover a current size cover and then we can see the image right in the center so one thing to note here is that on Instagram they are using icons so we are currently just using text on the overlay on our images so let's replace that now we can delete the likes and comments text and then we will use fun awesome to add icons so now we can copy this and add our comment so we need to add a little bit of spacing in and we also notice that our comments number has not been set so by default this does not set a zero on the database entry so that's something we can update via a migration however we also need to add some spacing between these likes and comments so let's do that now so let's look at much tidier now so now we can hide these stats by default and once the user hovers over them hovers over the image we want to show the stats so in order to do that we need to move the the author out onto the image itself so when the user hovers this instapoll class which is our image then we want to show the post stats we want that to appear so appears to be working correctly however the the images are very dark here so it's hard to see exactly what's happening so I'm going to upload an additional image one of the ones I copied from my own Instagram just to see how it looks since it's a much brighter image and we can get a feel for the overlay and how that's working now so this image is definitely a lot brighter let's go in and experiment here a little bit it's like this post leave a comment and that's looking pretty good right now and we see a little bit of an issue here with the overlay on our hover if we change this inner margin to padding it should fix this issue and we can see that now everything's aligned quite well so one thing we need to do now is make these images clickable now once we added the hover effect we move the image as a background image and the style so once we did that we remove the link at the same time so we can go ahead and update that now by using the link as a block and just wrap it around the code that we have already in place so let's do that now move the link to the top outside of the post stats and then we'll close out link off and give this a try and now it appears to be working again so now we have that working we can add a profile image beside each of these comments so on the left of the username we can add the profile image and there's a shortcut for that we can just copy and paste the profile image that we used before and we can just modify the values here to fit based on the comment loop that we're in comment on account username and then if the comment dot account or image is present then we will show the profile image so that's working we may want to change the size here a little bit to make them smaller and what we can actually do is use the helper method to be created in the last video so it's a profile picture helper method and that allows us to pass in a size dimension so this replace this quickly and see if that works for us take these classes out and we can remove this conditional that is already in the helper and we need to pass in the size and to make these more suitable we can experiment with this a little bit to get the size we're happy with you and if we compare it with Instagram the text should be aligned so the timestamp should be directly underneath the comment so we can fiddle around with the styling here to try and get this lined up a little bit better but I'm not gonna waste too much time on this so this is just small CSS tweaks you could even modify the HTML to use column layout to display this but the point I want to make here just is that you know we've got to the point now where we've got the image the user name the comment and it's looking pretty good all around so I'm happy with this as it is so one thing we need to do here is just link the username back to that profile of that user so that way we can click on a user's name and see their profile and of course you want to just darken the text here so one more thing I want to show here and that is about the performance issue I mentioned in a previous video and that is the n plus 1 query issue so what we can do to fix that is we can usually includes method so that will be used for other fields that are connected to that model so in the case of post we want to include our comments under accounts so we'll be using those values in our views so for our post view we can set comments directly within the issue method in our controller and from that and we can include the accounts so that way we won't be making a query every time we look over the comment section we'll just pass in the post ID in this case so in our comments partial we can just use the comments instance which is an array of comments we've loaded for that post and if you look at the log so you can see the difference this makes there's only minimum queries being loaded compared to what there was before if we scroll up you can see all the cached queries we had before so this is the solution to the n plus 1 query problem can be seen in rails now it's normally a human error we can easily make these mistakes but a little bit of effort we can improve the efficiency of our code since we are using a partial here for comments we will just update it to pass in the comments directly since we will be using this in different places on our app I just want to take the time to remind you while I tidy up this code here that if you do enjoy this content to subscribe to the channel for more videos like this in the future and I was originally intending to finish this video at this point but I decided to add some more tidy ups and improvements just to finish this off and really leave it looking like a nice product I want to finish this video so I have made some updates to the the profile so I have added some new photos here just to make it look a little bit brighter and cleaner and easier on the eye and these are looking quite nice and I've also added some profile pictures for some of the users so I've logged in updated your profile picture also updated your username and left some comments and updated some sorry uploaded some photos for some of these users so if we go back to the dashboard now we can see that each of the users has been updated and I've added this number of users here and if so that happens if the user is older than the date that we have set which i think is two days so I will have this count of users one thing to note here is that all the posts on this feed are currently my own however I will show what I have added here in terms of the code so I've added this code to allow only to show my followers posts and then additionally my own posts and aligned underneath so we're using the follower following ID and then I'm inserting my own ID here so I disable that we have no posts so currently I'm not following any users but if I pick a user here for example Jane and follower her we will see that her posts are now embedded in my feed so that's kind of how it works on Instagram and that's the way we have it set up now and it's working quite well and we can go ahead and like or comment on these posts and I think it really helps with these nice colourful images to make the app look much nicer so again we'll follow another user and then we can see their posts in our feed again too and if we sign out now you will also see that I've added some background color here to the landing page on the home page and one thing you want to do here is based on a comment I got in the previous video we want to add a social login to this platform so for that we are using Omni off which is part of device so we're using device for the sign up sign-in method already so we will use the additional gem called Omni off Facebook and that will allow us to connect with a Facebook app and create an account based on that users social details so this give this a try we're just going through the instructions here now and we need to add a new field into our accounts table and our database so first we'll bundle install to get the new gem then we'll run a migration to add these additional fields so in our migration we can see that there are two new fields being added let's go ahead and run migrate method and now within our device initializer we need to copy this line and paste it in so we go under config initializers device and we can add this into the files I'm just searching for the Omni effects section and we need to replace it with environment variables so we can set those in our application dot yml and the saying here you can add this additional token params if required but for now we're going to try without this and we will just append the FB underscore to our environment variables and there's another thing we have to do here within the model itself so our account model will need to add this Omni AuSable code and allow it to use Facebook let's paste is on till the end of our device statement and we'll need to restart the server here to get this running and we can see here that there is new routes created for logging in and Colback so we'll add this sign in with Facebook link to our home page let's add this underneath so now we've got this sign-in link here and we need to set an application ID for this to work so if we visit developers dot facebook.com/ we can go ahead and set a new application up quite quickly this is create a dummy application and now if we go under settings we can go under basic here and grab the details we need for the app ID and app secret so you can go ahead and paste these details into your application the yml file that we set up earlier and now we will restart the server so that this can take effect and now we are brought to this confirmation screen to allow this app to use our details so we can see an error here so it looks like we missed something in the instructions and we have to include this controllers omniauth callbacks so we need to add this into our routes file and just changes to accounts so we'll need to create this new folder within our controllers to hold this accounts on the author Bowl controller and again let's just change this to accounts and we can paste in this code for Facebook Lin underneath and Lotus modify this to suit our model you so now we need to add some code to our model to our account model and it's this self-taught from omniauth method so what this does is basically grab the details from the response from Facebook and uses it to populate a new account for our model so we'll create the new account based on the email password name image from Facebook so just give this a try and we can modify this just to use the first name and yeah everything looks pretty good here right now so let's go back to our hub and try this login again and we're getting a message here now about not having set up the username so on our regular signup for me have the username which the user has to enter but when we're pulling this data from Facebook we're not populating that automatically so we can add that to this from omniauth method you can set username based on the the name on the account so info dot name so even just looking our server logs here we can see that the account is already being inserted so the account is being created it's just not populating the username so we're going to add some basic styling to this Facebook button so we'll just give it the button class on a button info class to make it blue so it looks a little bit nicer and we can see when we click on it again it is automatically signed us in and this time if we click on profile we can see that there is a percent twenty here which represents the space between the name so we've just used a full name and this we've just used a full name to create this username so what we can do here is use a jisub to remove that blank space and to do this now we will need to go and delete the account from our console so we'll quickly just destroy the last account and try this once more and this time now we can see that there is no space in the name so we've got a full username and we'll upload a new post so automatically is created as this new account without us typing in anything which is quite nice so we'll just put in our first post we can go ahead and like our own post here and we can follow some users to see new posts in our feed you and we can leave new comments and we can see even our new post on our profile so that's gonna be after this video if you found this video helpful to subscribe to the channel as it will be creating more content like this in the future and don't forget to give the video a thumbs up and I really appreciate it if you've made it the whole way to the end because I know that this is quite a long amount of time for any video but I hope you guys have an awesome day ahead and I will see you in the next video you

Channel: David Battersby

Views: 4,015

Keywords: ruby on rails, ruby on rails tutorial, rails tutorial, live coding, tutorial, how to, ruby on rails 5, how to use ruby on rails, Ruby (Programming Language), instagram with rails, web app tutorial, build web app, prototype, learn ruby on rails, web app, devise, rails 5, walkthrough, aws s3, carrierwave, mvp, instagram clone, omniauth, rails facebook login, rapid web development, web development, facebook login, code, coding, live, ruby, rails

Id: SEBkefh2q2M

Length: 51min 54sec (3114 seconds)

Published: Mon Aug 05 2019