Learn Ruby on Rails Part 3: Build a User Messaging App

alright guys so the app that we're going to be building today is going to be a lot more difficult than the blog app so just bear with me and let's get started okay so you've completed the blog and now we will be looking at what we will be building in this next section and basically what it is it's a mailbox so that users can message other users that are connected to the site and so I have two windows open which are both signed out and I'm just going to login to this window with my password and my email and I'll log in and you see now we have my inbox with conversations and new messages then on the other field I'm just going to sign up with tests at test comm as the email and I'll say password will be password 1 2 3 password 1 2 3 and I'll sign up and now I have the same as the other user so if you see if we expand that I can go to all conversations and then all the users I'll refresh that and you see I have one conversation but there are two users and this allows us to message any user on the site but not have a conversation with every single user so I'm just gonna message myself and I'll say hi so I'll send reply and then I will send another message sorry PI by saying hello and basically now you can go back and forth sending each other more letters than actual messages but it's still really cool so you see we have all the users here and then all the conversations over there and of course all the link will be on the github and I didn't do too much with the styling this time but you can definitely customize it and make it your own so without further to do I will see you in the next video so we can start making this amazing application sweet all right so now that you know what our application actually looks like it's time for us to actually start coding our applications so I'll CD into my programs directory and then we'll type in rails new and we'll call our application mailbox all right so I'll wait for that to run and we're good so next I'll CD into mailbox and I'll clear the terminal and then after that we are going to open up all the files in mailbox using my favorite text editor atom so now that we have our program open I'm going to quit the terminal and go to the terminal that's built into my program and we'll do get knit to initialize it get repository and then get add dots excuse me get add dot naught comma and get commit dash M and we'll call this commit our initial commit which is what that's just the standard alright so minimize the terminal and then go to our gem file so we can install device so we'll delete this big comment here and do gem devise all right save it open up the terminal and do bundle install okay so now that bundle install is done we'll do rails G devise install and you should already know this should be a review to you because we have already done this when we built our last project so now we'll do rails G devise user to create the user model associated with device and then I'll say rails generate devise views so we can actually see what's going on and not have to code it ourselves and finally we'll do rake DB migrate to add all this information into our database okay so last I'll do get ad dot git commit dash em and we'll call this commits installed device okay great guys so the next thing that we will be working with is creating our own migrations so that we can customize our application and not have to use scaffolds so without further to do I will see you in the next video sweet alright guys so today we will be working with migrations and basically what migrations do is they allow our application to communicate with a database so that we can store stuff and stuff doesn't get deleted and creating them is very simple we already did it when we work with device all we do is to rails gee migration and then the name of the migration which we will call create conversations in this instance so let me type that in create conversations great and now I press enter and you will see what this will do is create a conversations migration and then we will be able to use Ruby to directly contact the database which is really cool so I'll open up DB slash migrate and you'll see we have create conversations dot RB with a bunch of text showing what when we created this migration and we have create table conversations do and in here we are going to create the table with all of our conversations so T integer which stands for a table dot integer and we'll set a variable sender ID so we have an integer which is going to show the ID of the Center sender and then T dot integer which will be recipient ID which will show the ID of the user who is receiving the conversation so yeah it's pretty basic and then at the bottom what we're going to do is do t dot timestamps and this is a really cool feature what this allows us to do is it gives a date to everything so when you create a new conversation it stores that date in the database which i think is very useful so we'll save that migration and I'll close out of it and we'll create another migration for messages so rails G migration create messages now that we have a conversation to hold those messages and then I'll run to open up the file and DB / migrate one second great and then in the create table messages Duty we will say t dot txt so have a text and we'll give our message a body and then T dot references alright so this will reference the conversation so that way we have each message being assigned to a conversation and not just random messages all over the place and I'll do index true and we're basically going to do the same thing again by doing T dot references if I could spell T dot references and we'll do user so each user has obviously different messages that are assigned to them and we'll set index to true again and then we'll go down the bottom and duty time stamps so that we can put a date on everything and make everything a lot much easier to search so now we're going to do rake DB migrate to migrate the bat abase and just close out of that so when we migrate the database this will edit all of our code and put it into there alright great so we are pretty much done all we have to do is do our get stuff so we'll do get add dot and then get commit - M and we'll call this commit will say created migrations for conversations and messages alright great so we are pretty much done I'll see you in the next video sweet alright so today we will be working with creating the conversation model and basically what a model is is it is a way for the database to connect with our application and this is going to be pretty tricky so bear with me first thing we have to do is going to app slash models and we will create a new file and we'll call that file conversation dot RB all right and we'll save that and then we'll create a class so I'll do class and the class will be called conversation conversation and that will inherit with the less than sign to active record colon colon base great so now inside of our model the first thing that I want to do is make sure that this belongs to belongs underscore to the sender and the foreign key so I'll set the foreign key to be equal to the sender ID and we'll give it a class of let's say user so class name user belongs to sender the foreign key is sender ID the class name is user now let's copy this and let's just change it so that instead of sender we have recipient and instead of sender ID we have recipient ID and it does the same thing cool now at the bottom here what we're going to do is we're gonna make sure that our post has many messages and depends if the message is destroyed so dependent destroy great and I'll scroll down and we'll say it validates underscore uniqueness underscore of and we'll say sender ID with comma space scope which is going to be equal to recipient ID cool so after that what I'm going to do is go down to the bottom now that we validate the uniqueness and set that scope between and bear with me it's about to get tricky we're going to say sender ID comma recipient ID du and then inside this loop what we're gonna say is we're open up some parentheses and some strings conversation conversations dot sender ID equals question mark and conversations dot recipient ID equals question mark then what we're going to have it do is we're gonna say or so we'll run this code or copy it make sure to put in that extra parentheses at the side so or will have the same thing and then we'll say sender ID recipient ID recipient ID and sender ID okay great so we'll save that and we are done with the conversation model sorry that it was so complicated but eventually you will learn to understand this code now let's just do get Ad dot git commit dash M and we'll call this commit created conversation model okay great thanks for staying with me guys and I will see you in the next video sweet alright guys so in this video we will be creating the messages model and I apologize for the last video being a little bit hard for some people but don't worry you wouldn't learn if everything was easy so in this video we are going to create the message model and in order to do that we're gonna go into app models and then just like the last video I'll click on models do new file and we'll name the model message dot RB great so in here we are going to create a class so I'll set class of message which is going to inherit from active record : : base then I'll just add a little end right there and inside here first thing we're going to do belongs to and we'll make sure that a message message belongs to a conversation and then belongs to user so I'll make sure that the message belongs to a user and we'll go down and we'll say validates presence of and we'll validate the presence of a body of a conversation ID and we'll validate the presence of a user ID okay so our codes looking pretty good so far next I'm just gonna paste in a little thing and what this is going to do is it's going to make our application look nicer by creating a string that's going to show the time at which a message was created and you can just copy and paste this it's not really important into what we're learning so open up the terminal weld you get our dots and get committed - em and I'll say created message muddle and we're done so sweet I'll see in the next video peace alright guys so now we will create the controller for our conversations so that we can actually hold conversations and have everything work out well and in order to do that the first thing that I'm going to do is we'll go into app controllers and then inside of there we'll create a new file and I'll call this file conversations underscore controller dot R be great so inside of here we're going to create a class like we always do and the class name will be conversation controller which is going to inherit from application controller and remember the camelcase great so in here first I'm going to set it before action so before underscore action and what this is going to do is make sure that no unauthenticated users get access to the conversations so before action : authenticate underscore user with an exclamation point because there won't be any show method or anything and first we will create a deaf index and so for the index page we will show at users which will equal user dot o and we will also show at conversations and at conversations will equal conversation dot all with a capital C all right great so next we're gonna go down and do a create method and this is going to be in two parts so in order to do the two parts I'm going to set up an if statement so in our if statement I will say if conversation dot between so if there's a conversation between params of the sender ID sender underscore ID and params of the recipient underscore ID so if the user is either a sender or a receiver dot present so if that exists if there are conversations basically to put it that way we are going to say in here at conversation is going to be equal to conversation dot between the params of the sender ID and the params of the recipient ID so basically this is what this is saying is that if you already try to create a conversation with someone who you already have a conversation with it's going to still show all of your messages which is nice and we'll also add a dot first at the end of that and now let's create an else statement so if the conversation is brand new then we'll just say at conversation is going to be equal to conversation dot create with an exclamation point and we'll give it the params of conversation underscore params which we will declare at the end of the video great so now I will end this if statement and then right before we end the create method we are going to redirect to the messages path or the path for the conversation messages so conversation underscore messages underscore path keeping that conversation in mind so we passed that in there and we are good so now all we have to do is go down and create a private method where we will store our conversation params so will its define the conversation underscore params and then inside of here that will simply just be params dot permit and we will permit a sender ID sender underscore ID in a recipient underscore ID so yeah guys it's pretty much our application and oops let me add a colon to that so yeah let's just go over what this does so first it authenticates the user and then after that on the index page it will show all of the users and all the conversations so you can add a user and if the conversation already exists then it'll show that or if it doesn't then it will create a conversation and I'll redirect to that conversation so great guys that's pretty much it I know this was a long video but hopefully you understood it all and without further to do I will see you in the next video where we can work on our application a little bit more sweet alright guys so in this video we will be creating the controller for our messages action and in order to do that we're going to go to app controllers and create a new file and we'll call this file messages controller dot RB and I'll open that up and say class we'll give this class message which is controller which inherits from application controller great so and that and then inside of here I'm just going to copy and paste a before action and what the before action is doing it's getting at conversation conversation find params conversation ID great so now I'll scroll down and I'll say def index and inside of here I have some code written that I'm about to paste in so at message jizz equals conversation dot messages at conversation dot messages excuse me and then I'll scroll down in that message put singular singular will equal at conversation diet messages dot new all right and then also I'll do a new method and I'll say the exact same thing as we have in our index method which is at message will equal at conversation dot messages dot new ok great so now let's do the create method so def create all and that and then inside of here what we're gonna put is that message equals conversation messages dot new message params and we'll define message params later so if at message dot save then we'll open this up and will redirect to conversation messages path with at conversation good and then we'll close that out and we are going to go down to the bottom of our application right before the last end statement and create a private method with def messages message params and it's going to be params that require message dot permit body and user ID so now let's open up our terminal do get add dot and get commit dash m and we'll call this created messages controller okay great so we are now done with all of our controllers now we're going to start working on the views and I will see you in the next video peace alright guys so today we're going to be doing something a little bit different and instead of going to boots watch comm we're going to go to get bootstrap comm and get the CD ends so in order to do that we are going to go to getting started and you see here if we scroll down you can download bootstrap or you can just copy the bootstrap CD in right here and then we can paste this into the head part of our application Daichi MLG RB so I'll go to views layouts application now HTML air B and then paste it in the head okay so I'll save that and now we have bootstrap in our application so I'll open up the terminal to get add dots get commit - M and we'll name this commit installed bootstrap CDN and we're done so sweet guys I'll see you in the next video peace alright guys so now that we have created the database for application now that we've created the controllers in the models for our application it starts actually create the part of our application or we can see what's going on and that's going to be in the views folder so I am going to go over to app views and then once we are there I'll create a new folder and we'll call this folder conversation and then inside the conversations folder I'm going to create a new file and that file is going to be index.html ER be great and then inside of here I'm just going to copy and paste some code since most of it styling and I'll just show you what the coding part of it actually does so first thing to note off here we have a lot of styling and we have a conversations and a message part and if you click on that then I'll show you all the conversations and they'll show all the Congress stations that it thinks you're involved in and it does the same thing when we click on new message it shows all the users except for the current user ID which is very useful now I'm going to create another new folder for the messages so messages will be the name of the folder and we'll create a new file and I'll call that file index dot HTML dot e or B again alright and I'm gonna do the same thing just copy and paste some code into here and then explain what the coding part actually is so in here you see we have a form for the conversation and the message and it's going to display a tulip of bootstrap tulip which you can read more about in the index and the resources for this video and yeah it's very nice so now we're pretty much done with our application so I'm gonna open up the terminal say git add dot git commit dash M and we'll name this commit styled and coded views great so all we need to do is make sure that we can get the routes working and I will see you in the next video all right guys so we have our application all coded but we just need to make sure that we have the routes in it and basically if we open up the terminal and we type in rake routes it shows all the different routes for application which I'll show you once it loads so you see for instance edit user registration and slash users slash edit and then the user ID and it's pretty basic so all you have to do is going to put big routes that are B and we're going to scroll down and right here I'll create a new line and I'll say resources resources for conversations do and then inside of here we'll have resources for messages and just like that we have all the routes for our message now we'll do a route index so we'll route to the conversations index which will give us the route of all of our conversations which we coded in the last video so good in the next video we'll test out our application but for now we'll do get a dot and then get commit dash M and I'll name this commit fixed routes ok good guys we are done and I'll see you in the next video alright guys welcome to the last video of this section we'll be testing out our application and you see I have localhost port 3000 on two different windows and since it's rendering the conversations view I'm going to go to sign up and then I'll just put in my password and I'll confirm my password so that I can sign up and then it will redirect me to the conversations home page and I'll do the same thing on the other window but I'll say test dummy an email comm password will be testing one two three testing one two three and I'll click signup and there we have it so if I reload the page on the other window okay so I can do all users test dummy in all conversations I have none and the same thing on the other window so I'll email test dummy and I'll just say hey bro send the reply and I'll go over an email myself and I'll say hello great so we can send replies we can send emails to each other pretty easily messages to each other and yeah I will see you in the next section

Channel: Khanrad

Views: 4,511

Keywords: khanrad, adam eubanks, online course, learn to program, ruby on rails, ruby rails, learn ruby on rails, ruby on rails tutorial, learn rails: everything you need to know, learn rails: quickly code style and lauch 4 web apps, learn rails for beginners, ruby on rails tutorial for beginners, rails tutorial for beginners, how to code, how to learn ruby on rails, ruby on rails tutorials, rails tutorials, heroku, bootstrap, udemy, user messaging app, devise, rails messaging, chat app

Id: mBgHO3UEcjQ

Length: 30min 36sec (1836 seconds)

Published: Thu Jan 11 2018