BUILD AN INSTAGRAM CLONE - RUBY ON RAILS TUTORIAL

hello and welcome to this video my name is David and in this video we're going to be building a clone of Instagram so before we get started I'm going to just run some checks to ensure that we have Ruby installed and also checking to see that we have rails Ruby on Rails installed as you can see from the terminal which we're going to be using a lot for this tutorial so the terminal is a great place to be if you're building applications on Ruby on Rails so we have also checked here for the bundler version so we use bundler to install gems in Ruby on Rails we have a gem set and we have a gem file for our application so this is something just to get familiar with but yeah we have got the correct version of Ruby installed for this tutorial and let's jump into it so now we are just setting up our application and it is downloading all the required gems for our application so if we just look at the Instagram homepage we can see that there is a login section right on the home page and once we are logged in we have a feed and we have a story section but I think for the purpose of this video we're not going to get to that we want to create this feed the user profile and some of the images that we've uploaded to our profile and we'll also try to include some comments and the ability to like posts that are made by other users and hopefully then we will also get time to add some ability to follow users and limb follow us and return so first thing we're gonna do is jump into our Instagram clone directory and just have a look at the files are in here so these are set up by default once we create a new application so now I'm going to open up the new directory within atom so that's the editor that I'm going to use for this project but if you use sublime or a different editor you can use that too and as you can see from the editor that the files are showing up in green and that is because there are new files within the directory and there's a default git positively set up locally but for the purposes of this video we are not going to go into get too deeply on this so we are gonna focus more on building the application and using it as a means of seeing how quickly we can do things within rails so the first thing I've done is I have started the server within one tab of terminal and I've just opened up a new tab so I can use it to access the rails console or create migrations and things like that so I've now jumped into the gem file so in here we're going to take out a couple of things we're going to remove turbolinks we're going to replace the database with postgrads that's our plan and just clean things up a little bit so the first thing we want to do here is install postgrads so there is a gem for this already we can just copy the the version number and paste it into our file and the next gem we want to introduce is bootstrap sass and let's just makes it easier for us to incorporate bootstrap into our layouts should save us some time later I'm gonna paste in this version number and finally the additional gem I want to add is device now this is great for user authentication allows new users to sign up sign out sign in reset passwords all of these things and we will install all of these using the bundle install command so that will give us the new versions of all the gems that we've added now for some of these gems you will notice that they are slightly older for example the bootstrap sass is using bootstrap 3 and there may be a better solution out there but these are the gems that I'm quite familiar with so I'm just going to stick with them to save some time for this tutorial so now our new gems have installed we will start the server and open up localhost and set it to port 3,000 and we can see that the application is now running so any device instructions we can see that we need to run this install command to create the configuration file and it's telling us here that there's something wrong with the data database version that we're using so I think it's still set to sicko light so it'll change that to postgrads and we'll also just tidy up the names a little bit to make them more specific to our application so we will append the instead front of the name and for all environments and this should be what we need to get started so just give this another try run the install command again and this time it looks good we can see that a new file has been created the RB file within the initializers folder and there's also a translation file there under the locales directory and we can see that we need to insert a command into our development environment so we'll just do that quickly it's for the action mailer so it sets the default URL it's in our emails and we can also see that we need to set a default route for our application so let's add that to our routes file so you can see here that it's pointing to a controller name of home and a method name of index so we are going to change this to a custom controller name of public and we can change the method to homepage it can change this to whichever you want whether you feel more comfortable with in terms of naming conventions but I normally like to keep the controller name of public because this is when our users are not logged in or not signed up at this point so it's just clear to me that all these methods within this public controller need to be accessible by non logged in users so now we will want to generate our first model using the device method so this will create a database migration for us and it will create all the necessary fields for that database table for our application we are going to set the model name to account so you can see here that the migration file has been created model has been created and we can also see that there are some test files created but we're not going to look into those at the moment within our routes file we can see that device has been also included and now we are going to migrate our database using the the migration that was created from our last command but just before we do that we are going to take a quick look at the configuration file for device we can make a few changes in this case we're just set a default sender email address I'll just use a test one and you can actually you know set additional fields here that are used for authorizing users for an example you could change the email to user name but we're gonna use the defaults in this case and this is our database migration for the table that will be created for our users so in this case we're going to enable some of these fields that track sign-in counts IP addresses things like that and you can also enforce users that have to confirm their account before they can log in but we are not going to worry about that for the scope of this video so we're going to go ahead and run that migration and there is an issue here it's telling us that the database does not exist yet so we will run the DB setup command rails to be set up and this should create our databases and then it's also telling us in order to create the schema file we will need to run the DB migrate command again and this time it has also created our new table for our users so now we are going to run the rails generate command however I like to do the shortcut approach so rails G controller and we're gonna create our public controller now and you can see that is also created similar files it's got the views folder it's created for public it's got a helper file it's also created like a coffee jas file which will probably remove because we're not going to be using coffee in this these things can actually be configured once you are creating the rails app you can pass in parameters for that but for the sake of this video we don't want to go too deep into configuration and jumping back now to our public controller we have set up the first method for that that's our so now we need to create the actual view for our home page so that's within the views public folder and for this tutorial we're going to be using the standard ERV files and we'll just put in some dummy text for now and see if it loads on the front-end so it's giving us some information here about the device it's not liking lis the routes that are set within the device folder so in order to fix that quite often the case is we need to restart the rails server to actually get the thing running and in this case restarting the rails server has fixed our problem so now we have a running website and the first thing we're going to do in terms of structuring our views is download this bootstrap template so we will just grab the files within this download it's a bare-bones kind of template we just want to have a basic structure to build upon so we are going to do is copy the required fields and drop it into our app directory so we'll use a vendor folder for this this is what it's use case is so we will just set up an assets folder within it and the stylesheet and JavaScript folder within here so I'm just confirming here that the files match but in this case we have named it incorrectly for the style sheets so to correct that needs to match the assets folder that's within the app directory so now we can drop in our files we are going to use the minified versions and we will do this for both the JavaScript and the CSS and now we just need to include these within the application J's file so we can add a new require and include a new file that we've dropped into the vendor folder so put strap top min and we also want to include jQuery dot min here and we'll push that up to the top so we'll be using jQuery for some basic interaction within our apps front end and now we will open up the application view within our views layouts folder I will just make some tweaks here to tidy things up and we can use some of the boilerplate code from the starter template that we downloaded you and we can move the important rails parts up into this boilerplate code and we will no longer need this bootstrap Topman CSS import because we will include this within our application CSS file so we can add the require method here and this will take from the vendor folder so going back to our starter template we want to copy some of the navigation boilerplate code and this will just help to speed things up terms of getting our basic layout together and we will just paste this at the top of the body so I just want to tidy up the indentation a little bit just not not overly necessary but I just like to keep things neat and tidy and looking at our page content area we want to include the yield method in here so we can take out some of this dummy content and just move that up so that means that any other views like our home page view will be included within that template at the yield area that we've moved up so we can just tweak our home page a little bit put some dummy content in here saying please register or sign in and then we can point directly to our login route or signup routes so in order to get these routes we can use the rake routes method in our terminal and we can see all the routes we have for our application at any point in time so we will just paste in the new account registration and I'm going to add some basic styling here from the bootstrap template create a button and we're seeing a small issue here cannot find bootstrap Dom in looking in our configuration for our assets or initializer everything looks to be fairly standard here no real issues and we are using the vendor path so everything should be working at this point and these are little issues of your face when you're building any application normally the solution is quite simple you just need to have restart a server or tweak something a little bit so in this case we're going to restart the server again and now we can see that everything is working as expected we have our new homepage our basic menu at the top and our signup button and we can even see our signup form now that it's been created automatically by device so next we're going to make a few tidy ups we'll change the name at the top to instagram clone and it will just like if you clean up here just to make our application a little bit nicer and we should really now look at styling some of these fields a little bit we can use the default classes are part of bootstrap do that but first let's create a sign-in button I'll make a secondary class just to differentiate a little bit so now we have our sign-in view as well so let's start by trying to create a test account just to see what happens with our new device setup and if we look at the rails server logs now we can see that the account has been created it's inserted into the accounts table yeah so basically what's happening here is we click on the sign-in button now it does automatically redirects us so the reason for that is that a session is being created already so once the user has signed up they are automatically signed in by default using device so we need to really have a check to see if they are signed in and do something based on that perhaps change a navigation too to suit the signed-in user so I'm going to take a brief moment here just to remove the git directory on this project it's nothing related to building the application but it's just bugging me a little bit having everything in green in the sidebar so you should by default really use version control for all your projects however in this application I'm just throwing something together really quickly to show you guys how everything works so so there are certain things I would include in a application such as test-driven development version control using git however for the purpose of this video it feels a little bit overkill and will slow us down quite a bit so with that out of the way let's jump back in and create a view for our dashboard so we are adding a new route here for our dashboard and I will point to our accounts controller now our accounts controller is the device model that we set up based on the device model of a setup so we will actually need to generate that controller first and in turn it has created some views for us and the style sheet for the accounts and few other bits and pieces so we can now open up our controller and we will create a index method here which will act as our dashboard and one thing to note here is that we should really restrict this to logged in users or authenticated users and there is a command to do this in device we can just drop that in and change the name to account as that's what our device model is and this means that no user can access the dashboard unless they already signed in have an account and we will also create a show method here which will be used to show the user's profile and the dashboard in this case be with our up being Instagram we will be using a feed for our dashboard so that is our objective and we're getting an issue here saying that the index template is missing so we haven't set that up yet need a new file in here for that so now I'm just reloading which is created a blank file and it seems to work okay so the next thing we want to do is put something on this feed so we will need to generate a new migration for the posts so we can open up our database migration now have a look at that under DB migrate and we can see I've got this template code here for a new table so we will want to include a we want to include a image first of all and we'll also include the basic timestamps so when the post is created or updated that will be recorded and will need a reference sent to the account of the user who made that post and finally then we will include a boolean value which is a true or false value to determine if the post is active or it has been deleted so now let's run this migration to create our posts that has been completed successfully and if you look at the schema file here now you can see that we have the accounts table and we have the post table so now we need to create a model for our posts we can do that using the rails G model approach and is telling us that this method will also create a database migration but we don't need that so we can use C skip flag here so just opening up our post model now and our first field in this post is going to be our image so in order to upload images and our application we are going to use Amazon s3 servers to do that and to access that we're going to need a couple of gems firstly we've got courier wave which will do the file handling so it's described as a classier solution for file uploads for rails and yeah I've used this in several applications and it works quite well and then we will use the fog jam which works well with courier wave so fog lets us use access to the f3 buckets and finally learn mini magic we can use that for resizing images and basically handling the images after the upload creating thumbnails and and other things so we will also include one other file here it's called the garo which it allows us to work with the environment variables within rails so if we're using a platform as a service such as Heroku and we can handle those environment variables quite easily using their setup but on our localhost we need something to do that job for us so these are the four jams we're trying to install right now and we'll just close down our application restart it and the next thing we need to do is generate an uploader file so we can use this command rails generate uploader to to create that configuration file so now we're going to open up the uploader file that we've created and we can just change this here to use fog instead of file and now we're also going to create an initializer for carrier wave to set correct environment variables so I'm gonna paste in some code here I prepared this code earlier but you can get this on the configuration page for courier wave so the documentation page for carrier wave and basically what we're doing here is setting the environment variables for s3 and the directory the bucket that we're using on s3 so in this case we're using fer Garo to pick up the local the local environment variables and we'll just populate them in here in this application yml file so you can replace these values with your own credentials from s3 but it's also worth pointing out here that you should not be checking this application dot yml file into your git repository as it contains the credentials for s3 it's good idea not to put that into the source code so you can see that I went ahead and created a bucket here on s3 it's the clone dev and we'll be using that for this tutorial so the next thing that I'm going to do is connect our model to the uploader file now I can do that using this mount uploaders command which you can drop into the model now we just need to modify this to fit our names that we have used image uploader and this is an image that's the name of the database column that we have now you will see an example on this page that it's using the plural of Mount uploaders in this case its forearm uploading multiple files at once every we just want a single image here proposed so we will just change that now we can use these values to drop into our controller in this case we haven't created a controller yet for our posts so we were going to we will go and do that next we can do it manually this time by just typing in post controller and we will set this up as we would with any other controller you and we can input some of our basic methods here you so at the bottom of our controller we can create this private section and we will whitelist the values that we allow the user to update when creating a post or when updating a post so this is the strong parameters approach that rails uses in the later versions where it limits the fields that you can actually update from any forum within your application so as a approach that rails uses to prevent any messing around or tampering with forum data so now we want to be able to create the ability to create a new post and to save that post so we'll create these methods new and create now these are default default methods that come in any new rails controller however we will need to add the code ourselves to get this working and we will also need to add new routes here for our posts now we can use the resources command to do that and we can pass in what what methods we want to use within the routes that are being created so we just want to keep it simple we want to be able to create a new post and also a view to show the existing posts are created so now if we go back to our post controller we can fill out some code here to set up a new post and within our create method and we want to again create a new post but we want to use these post params method that we've created in order to whitelist the values that we accept so we're going to come back to this controller in a bit but first we want to create the views for posts as we have not got any at the moment we will create a new folder for that and we will set up the basic views required for creating a new a new post and we're going to render a partial here so we will move our form code into a separate file and it does notice we made a mistake in the naming of this file we need to end in dot e RB in order to use any rails commands so we'll create the new form partial here and if you put the underscore in front of the word form when you're naming the file that will make it be recognized as a partial within rails so we'll do the normal code for setting up a form and it's created for this post as you can see we're using an instance variable for post so having a look at the code on courier waves and we need to see what our upload field is going to be called so in this case we also need to set it as a multi-part form now that's because we're attaching a file to the form we need to do that so tweak this a little bit to make it fit our naming we've used within our table and that will need to include the image cache in here to the whitelisted field and we can actually take a look at this on the front end now and see how it looks and we just go directly to that route post slash new and we can see there's an issue here mount uploader image or something not quite right here and if we have a look again we can see that everything looks okay in our image uploader and we'll have a quick look at the post model again everything looks correct there's no typos so yeah well we'll go ahead and do our our old trick of switch it off and switch it on again and yeah that's done the it's kind of working so we are missing a button here to submit the forum so let's add that quickly to add a submit button and we can add some basic styling to this button using the classes from bootstrap and it's have analytic and now we've got a button to submit the form I will add it it will add the form control class from bootstrap just to tidy it up a little bit and it's not amazing looking but you know it does what we need right now hopefully so we can tidy this up later so we can see here that there is a missing template for the create method so it's it's receiving our file that all looks ok so if we create a template hopefully we can continue forward so I'm just gonna remove turbo X at this point because we're not really using that so what we're missing here is the create method we haven't quite finished as yet we we left it previously so we'll go back and finish this off and see if we can save our post so we will create an if-else condition here and then we will redirect the user back to the dashboard if the post has been saved and we will also use the flash message that it's part of rails a flash message is basically a way to highlight some small piece of information to the user on the next page load so it's used for notifications things like that now we don't have it set up yet in our views but maybe we'll get to that later so if the post does not save then we will redirect user back to the new post page so and then we will update this message to say that was not saved correctly let's try this once more to see if it now works so we will try this once again put the image save post and if we have a look at the server logs again we can see that this time it has actually created the post and it's put it into the database however we have not really put any way to see these posts on the dashboard yet so we need to add some code to do that let's close down some of these windows that are open and jump back into our view so the first thing we need to do here is we need to load the posts that are already saved that is on our dashboard so we will create a instance variable and load in our posts so a post start active in this case we will set a scope on our post model to only select the active posts the idea here is that you know users can delete posts later and we will implement a soft delete where we only marked them as deleted but they are actually still in the database so now we will add some code to our dashboard view to display the posts that we have populated so here we will loop over the posts we'll start each and for each post and we will generate some code to output the image so we can access using poster image to URL to get the URL from s3 and we'll just add some basic classes here to our image so we can have a look in the browser now and see what's happening and there is nothing appearing at the moment but it does look like the posts are being loaded based on the active boolean so let's do a little bit of debugging to see if we can figure out what's going on here and see how many posts have been loaded out put out to the view know this into a string and it's not loading any posts it would seem so if we jump back into our rails console we can have a look so if you run post on you we can have a look at the fields here and if I load up the post all we can see our last image has been uploaded but there's an issue that the active has not been set so by default we should be setting that is active so as a temporary fix we'll just update that and now we can see our image has loaded it's a little bit large but we can control that so if we look at the source we can see the image is actually pointing to s3 so that all looks good now we can just add some additional code to style it up a little bit so we're adding a div here The Container class and then we will create a low within that so this is some template code that comes from bootstrap in terms of layout so we just want to control a layout a little bit better make it closer to what we see on Instagram so already it's starting to look a little bit better in terms of layout got this wide column on the left and then it'll be a smaller column on the right but we want to improve the the layout around the image at that top section with the username so we can include the name of the account who owns that image first so I've included a field here called username now so far we don't have that within our database and we can confirm that by looking at the schema and even if we look at the migration file there are no username in here but that's something that we can add quite easily so we'll just get out of our console and we will create a new migration to add that field and we'll set a length on that feel to 20 characters and wear while we are here we will also add some additional fields such as first name last name and we will run a migration on our database to incorporate these changes and we can see our new fields have been added so what we should do now is include these additional fields within the signup form and the edit account form so within the views for device we will add the user name and set that to a text field and we will also remove the auto focus on the email field and then we will copy this and add our two additional fields for first-name and lastname and we can then copy and paste this into the Edit view three additional fields and then again we will just remove the autofocus and then within our application controller we will need to include these additional fields again so we will need to go back to the device documentation so we missed this the first time round but we have caught it now when you're adding new fields so for device you need to whitelist the fields that we're adding the same way that we do with other controllers but for device it gets added to the application folder sorry to the application controller so we're going to add first name last name and our user name so since our user account already exists we are going to go into rails console and manually update the first user set a username we can also do the same for you first name and last name and then now we can include this in our view so we've got a username here and then we will wrap this in a div that will sit on top of the image that is in their feed and we've missed something here by the looks of it so we need to modify the post to include a reference to the account so we can say that belongs to account and we can say that the account has many posts still there is something wrong here it looks like we have not been setting our count ID yeah so we can do this within the controller when we create the post we will need to manually set that and we can check to see if the account is signed in and we will destroy the first post just to prevent this error from happening and then we will create a new post and try this once again again we are seeing an issue here something's not quite right we need to set the active by default we forgot to do that set the active status you can do that on a database level by updating a migration to set the default value of that boolean however we haven't done that so for now we will just set this on the create method so before you create the post it will automatically set status to an active so the next thing we want to do is we want to tidy up our application do a little bit and allow it to understand if our users are logged in and show a different menu so we will move this out into a separate view so public navigation and we will also render this file here if the user assigned in so if the users signed in then we will render a user navigation or account navigation and then we'll have the public navigation if they are not signed in I can copy this code make a count navigation and make this one a partial but the underscore in okay now we can just tweak the account now a little bit so that we can see if it's working we will remove the screen reader part for now I don't think we need it in this example so we want to link to dashboard here can use our dashboard path for that and at our class again and then we can copy and paste this for each of the navigation items we can set the new post path so we don't have to do that manually and then we can link to our own profile and finally we can sign out our account I'll need to check the routes just to double-check what that path is we're looking for Lee destroying method here destroy account session and we don't need to pass anything into that so should work without it we made a mistake here we should have had a question mark at the end of account signed-in typo and it's saying missing partial so the file is not being found you need to double check that we need to include the layouts yeah and now we have a different issue it's saying there's no account path doesn't know what that means so we need to set a route for that in our routes file there doesn't appear to be one specifically set up using device as a temporary measure we can remove this and set it as a dummy link for now you can come back to the profile later so let's focus on the dashboard first so now if we we can see our new navigation now that we are signed in but we want to change this to dashboard rather than home and once you click on it then we should be seeing a list of our posts here so if we create a new one now hopefully this time it will work by default now that we made all the Corrections so now we can see our photo has been uploaded post has been created and we will add another post just to see how multiple work so as we expect now it's working kind of like a feed so we can see a list of posts that have been made so now we will make some updates to improve the styling of the feed so we'll begin by adding in background color to the body of the page you and we will create a new style sheet for our posts and in here we can style the top section above the image so we are adding a background color aligning the text to the left and just trying to tidy up the presentation of that data so now we will add the class that we have just created the styles for in our stylesheet and if we reload that we can see that our Styles have taken effect and we will add a border just to make it stand out a little bit you and at this point we can have a look at Instagram again and copy the color that they're using for their background so that our application looks similar in style and it's a very minimal change but it will start to look better once we style up other end elements on the page and we can modify then the border just to blend into that so now we are going to wrap our posts in this div and we can use that to style the posts further so now we can go ahead and add some margins to the posts to space them out a little bit make the presentation better we can see now it's starting to improve a little bit but we can also push down the top content of the page so based on the navigation bar and already things are starting to look a little bit better so the next thing we can do is add a logo or profile image to the top of the image on the feet and we can also add a sidebar that has some information like users to follow just the way it is on Instagram so the first thing we can do here is add a new column and we will input a div here that will have a white background so at the top we have our current profile name and image so we will add lat just like it is on Instagram so we can you get that data using the current account command so this will be the information from the signed-in user and I'm going to introduce a new method here for the account model this will pull in the first name and the last name and return a string with a space in the middle of the two names we can see that it is now displaying on the page we still need to add our image our profile image yet we can go ahead and add some styles for this user data at the top so we can see that the text underneath on Instagram is grayed out and so we want to just still the same approach for our style and we can add some spacing to the bottom using margin and there is no background color so we can just leave that out so now we can wrap this in a paragraph and bold the text for the username so we can also add a new div for followers suggestions that's what we see on Instagram already so for now we will just add some basic styling such as background color padding just to make the element visible on the screen and we will come back to populate that later and we can also go ahead and copy the border and apply that to the follower suggestions make it stand out now we are just rounding the box a little bit these are things that you know make it look a little bit nicer but we won't spend too long in this we're just trying to make it presentable at this point so the next thing we need to do is update this sign out path looks like it is using a get request if we check our routes again using the rake routes command we can see that we need to use the delete method to sign out so we can just append that on to the URL method delete if we reload and the other sign out is not working everything appears okay so we can just sign in again so the next thing we want to do is set up our profile page now it's just a blank link at the moment so within our accounts controller we will add a method to load the profile for the user so we can do that quite simply by setting up eight before action and we can restrict that to only set the post on the show method and I've just realized we made a mistake in the naming here so we will rename this to set account instead of set post and what we want to do here is load the account of the user based on the parameter let's set in the URL so we will do that using the username that is set for the account and we can use a method called find by and we just a pend underscore user name and set the parameter is being used to load that user so now we need to set up a new route in our routes file this will be for the profile URL so we will make the URL profile slash and NOP username will be the parameter that is in the URL and then we will just use that the accounts controller and change the method name to profile here to make it a little bit more obvious what it's for and then we need to create a new file and for our profile view and now we will enter some basic user information using the account that has been set in the controller so now we will go back and add a name to our route for our profile so that we can use that within the navigation and if we go back to our navigation view now we can quickly update this will pass in the current account username and we'll see if this works and it's working so we've got a very basic view at the moment we'll need to add additional information similar to how it is here on Instagram we want to add the graphic some information about the user and just tidy it up a little bit make it look more design friendly so right now we are just adding some basic layout based on the bootstrap template so we will add two columns smaller one on the left on a wider one on the right and now we will add some basic count values of posts followers and who's following us and just like it is on Instagram so we will try to lay this out in a very similar way so the values that we are putting on to our profile right now these don't exist yet like total followers total following but we will populate these afterwards we just want to get the design looking similar to how it is on Instagram first so we are just getting the layout right now so we can temporarily set these values to zero and we can do this from the model by adding new methods with the same name that we have entered into our profile and we can see the values are now appearing so now we want to add our profile image to the left section on the page so we will usually mount uploader again that we did just like we did on the posts model but we will add this to the account model so this will be a profile image in order to do this we need to create a new migration to add the column to the accounts table so we are adding column and this is for our image very much just like we have on the post model and and here we'll also add a couple of new fields or description and see a URL at the bottom of this one - website okay so once we add these fields and we can populate them on the profile - so first let's run our database migration so now we will need to add these fields to the edit profile however we don't have a link for editing profile yet so we will add that first so this will be added onto our profile page and we can get the link for that using the rake routes and will add a class to style that up a little bit we're missing the name for the button text for the button so we'll add that so now once we click on that we can fill out the fields to modify our profile one thing we'll do here is we'll take off we let the center alignment so but everything is on the left and we need to add in our new fields now for image and details so we can do that under the device views we can use the Edit view to allow users to add a photograph and a username and we will just go down and style all these fields a little bit just to make it consistent you so already this is starting to look much better we will add some style to the button as well for submitting so the code that we see here in the device view is default template or boilerplate code you could call it so it doesn't apply some of the styles that we use in bootstrap so we're just adding the bootstrap styling to make things much prettier on the front end so now we can go ahead and add in an additional field for our image we will copy that from the posts form just to save a little bit of time you and we will add a label for the image upload field so that users know what this is for see that it's now an image and we'll just test this out really quickly so we have to set the password this is a standard device gem issue so we have to set the password when we make an update so we can check our server logs here and can see that the image is being attached but these new fields are not permitted right now so we need to whitelist these fields that we've added to the accounts model so if we go under the application controller and in here we can duplicate the signup permission fields and modify that to account update so we can add all our new fields and we will try this once again and if we open up the server logs we can see that the image has been saved to our profile so that is working we just need to get the view working for the profile show that image so we will drop the image in now on the profile so we want to have a rounded image just the way it is on Instagram and we need to make some some changes to this so that class has not been recognized I think it's possibly from a newer version of of the bootstrap so what we can do in here is we can actually set a thumbnail within our uploader class however in this case a shortcut method is just to add a limit to the size so we can set up to width and it will fit this width of 200 pixels what we can then do is we can set up our own class for the profile image this will allow us to make the image circular and add any additional styling we may want to add so the first thing we will do here is add a border radius of 50% so that will add that to all corners and it should make the image completely rounded it is very fresh that and we're seeing a bit of an issue because the height of the image is greater than the width now that's something we should probably constrain on the upload but as a temporary workaround we can add our own photograph in a square format to see that everything looks okay and now our profile is looking much better that we've got the photograph added now we are going to tidy up our profile and clean up the layout of the stats and add our additional information for profile details so we'll quickly change the layout of this first so that all of the values are in a straight line so already this is looking a little bit better and we can compare it against Instagram and see that the format is kind of similar but we still need to add our additional information so let's go ahead and add in our full name to the profile followed by the description and we can use the simple format as a means of adding multi-line content using the description that's a good idea to do that if you're using a text area to populate the field and then finally we will show the website at the bottom as a link you so one thing we forgot to do was include the description field on the edit profile view so we'll just drop that in really quickly and we will set that as a text area we also need to put in the website field now once we reload we can see these new fields added and we can populate these for our profile you so there is one additional thing we missed and that is white listing these fields I think we've white listed the logo already but the firm must have forgotten to add these fields so we'll do that really quickly description website and once again populate you so now we will go back to our profile and we can see that the information has now been added you so now what we want to do is to show the posts on the profile that we have made we will add some simple layout code here for that and then we will have a loop that goes over each of the posts we still need to set these posts from within the profile view we can add that based on the current account for viewing so we can go ahead and grab the code that we need from the feed view or the dashboard view to display the post layout and we won't need any of the username data will just be the post itself and we will add a column for each post that gets added you so now we can check out how this looks on our profile and we are seeing our two posts that we have already made so that's looking good so far we've got quite a lot done in just over one hour so there are some improvements we can make in the next video but overall the progress has been very good and I think that's going to do it for this video so far we have got a working profile and we have a feed that shows the images posted by users so now we are just tidying up the layout a little bit on the profile but that's it for this video I hope you guys have found this useful and I will be uploading a part two in the next few days so do subscribe to the channel and like this video if you found it helpful and if you want to see more Ruby on Rails tutorials on how to build MVPs really quickly so thank you guys for watching have a great day and I will see you in the next video

Channel: David Battersby

Views: 36,409

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

Id: dqjF3C9A-Yg

Length: 73min 20sec (4400 seconds)

Published: Tue Jul 30 2019