Create Your Blog in Ruby on Rails 6

hi welcome to Ruby bro and my name is Jim and today I'm going to share with you how to create a very quick web app using Ruby on Rails 6 so before we start Ruby on Rio 6 was launched just a couple of months ago and I'm speaking into 2020 doing the Cobie 19 pandemic and even with that issue I don't think that should stop us from learning and improving our skills right so I think it's like today I need to show you something that you can read it but I just want you to see it with your own eyes how quickly you can actually create your own app running and get it go okay so what you're looking at is my desktop I'm using a Mac I did not update it to Catalina because of many issues and software's that I still wants to run using my older Mac but the commands and everything else is pretty similar of what you would be doing with other kind of operating system including Ubuntu linen and other kind of flavor of Linux and even PC I do have a PC I'm not doing tutorials or video with it because there's some complications maybe in the future I can dedicate full full time or more time just to show how the environment works for Windows but most of the developers that I know for Ruby they actually use Linux or Mac in order to get things done now let's start so you are seeing my term you know you might look slightly different than what you have I use I terminal to I set up with my own bash profile with customizations about collar what it should be showing or not but I would just start with making a folder and then I was just logging to Revere oh and now this is my root folder and here I'm going to create the app of the rails so the command is a Rios meal and then the name of the app that we just use blog now there's actually a lot of things happening in the back right so first you have to have the right version of Ruby installed then you have to install bundler install rails itself a lot of things today in this video to make it very short I'm just sharing with you that unless if you if your system is very different you wouldn't be able to do that as fast as I do but in general what happened is that we just run the command rails news whatever the name and then magically behind the scene in rails you pull all the libraries and dependencies and then it would create a folder with everything inside and then you can actually run and see how that goes right now it's installing sass and building native extension so the process is that interest-only like in Ruby for Ruby programmers depending on which library you use there's a lot of native building extensions right what is that supposed to mean is that a lot of these libraries they actually will install in your computer and will try to compile whatever that code is which they might have dependency on Ruby right most of the time they have dependency in C right meaning that they are actually have components that are made programming c language or c cosmos whatever that is or even java and then the system will build those libraries compile those libraries bays on your operating system that's why i can take a little bit more time to just running right but this is natural and there's nothing wrong with it your first installation maybe after major update my see that your computer is trying to build these libraries as it goes right and meanwhile what I will do is that I will show that to you that I use sublime as my editor sublime 3 okay you can use vs code I also have the ESCO and in sexual pretty amazing to be honest how it actually works both app I think they are very fast and responsive yes code in exchange I think it has a lot of features that is hidden inside of sublime that's a different discussion about how that's supposed to be but definitely you can actually use vs code or sublime or whatever the text editor for you that you feel more comfortable maybe in another time I can make a video just to talk about the difference between them both and you can choose to pick whichever you want right now it is still pulling but now interestingly we are in the JavaScript dependency so the other thing about the reels will be almost six just like some previous versions yeah it has a lot of dependencies with JavaScript especially if you're creating a lot of fun and stuff based on those frameworks that are super fingers written in like view I don't think ever is that famous anymore but a member angular J as in so and so forth and rails 6 uses webpack which is basically package manager to JavaScript and try to assemble everything all together for us on rails right again this is not a specific tutorial or anything that you buy back but you will also see that race is polling things from the JavaScript or node.js case now everything installed as you can see and then you can just log into the system blog and the first thing we can do is to run rails ah yes when you run basically rails server that's what it means we see a lot of message for what matters to us is that we can actually access the web page right now so I will just open an incognito I can type localhost 8080 you don't want to type localhost you can also use the localhost natural IP address which is one two seven zero that 105 thousand three thousand and it's running you can actually define which port you want your page to come out and that's easily that but this is not the scope of this video now you can see that it's great you are running rails and what can I do with it right now right as I said our objective is to make a blog the stereotypical tutorial of rails is that you just go to rails website right and then you click the tutorial and we will see the blog post tutorial but here I will show it to you regardless how it's done right one of the most versatile commanding rails besides running oh by the way to quit you just do ctrl C and then the server that your computer is running on we will stop running rail so if you try to refresh it's not gonna happen anything because the survey is shut down right now to create my blog I need posts right the next command where I'm going to show here is the scaffold generator so what happened is that I imagined basically a function right in this case a blog has many posts and based on the posts I try to imagine what this post has to have so let's start so what I would do is type rails again G or generate write and then scaffold and then I would type the name of the class which is post you can actually use it as like this - it doesn't matter if you put uppercase or lowercase and then after the name of the model what you have to do is to put the variables that you want to have so let's visit a typical stereotypical web's blog post let me say blocks let's see I'm just looking at it let me just reading here I would just choose Corona Lite block so here what happened is that I have the image I have the category the title write the author the date and the content of the text inside right so why don't we wrap the case something seemed a little like that right so again what do I want for a blog post is the following I want to have a title and I would define as a string type the next thing that I want to have is the category and it will be also a string type and then after that I want to have the author which is also string type date is defined rails will magically create all the relationship of the date of when things are created right and updated so we don't have to touch on that and then the next thing that I would like to put is actually the image the image in this case there's multiple ways to do that we could upload but again for this of brevity it's just that you are out so image URL and he is also a string time okay now I click enter and magically behind the scene right the system was just generate all this file so let's take a deep look so it creates the migration of the file which is related with the database we have to create a table for the post so he can hold it it creates a lot of models of pages tests controller it creates the views with the HTML right even create the jason-- jason-- files yes CS satisfy and so on so forth so now let's try to run on purpose it will not work it will say now when I try to access a page you see that look there's pending migrations so rails are smart enough to know that you are creating something new right and you haven't done your job yet so I will do control C and then now I will do rails right DB migrate before Rio sex or even 5 I don't remember well but you have to use rate DB migrate this command will basically create the tables into our database it currently the database that I'm using is just sequel Lite I'm not using anything like my sequel or Postgres at this point for this demo we can change that very quickly later now when I do rails ass let's run the page again ok you're on on rails and then I looked at posts to roll and from there the sicilian combined the h a CSS and javascript and then you can see that there's just like testing or category rails all third chain oops image URL HTTP I will just copy image somewhere and let's just pull the cyber truck image copy image address and create a post okay you see that here is like okay I have this Oh besides I even forgot how to have the text right okay so as I said it's like it's missing the text right it's like we created everything ready but when I see okay it's it's not exactly what I want because I want this image in not as well even though I have everything else so Rios things can be fixed quite easily so here I have my console again I will just do ctrl C to exit the real server that I have and then I will do rails G migration what I'm doing here is to add the field into the existing model right and then I can do per convention you do add ain't upper scale and then I will say content right which is what I want to do to post which is the model and then I just do content slash text column text and then I do radio s DB migrate right you will add the content into the existing model but I have to do a lot of other change so I have my shortcut of sublime I would just open sublime into my folder what what's happening here may look a little bit scary but he's not that scary at all right with time I will in another video I can show exactly how the file structure is but once you have the the rails web app is actually collection of files and folders the moment that I add something into the existing model right and and this is a sequence that I'm going through right so first I want to go to model and check on the post there's nothing there so even though I'm adding more fields and there were fields already existing I'm not worried about that model so cold the next one is actually the controller so there's a proposed controller right so I'm following them m-v-c model even though that's not the frameless that people use this anymore but I'm starting with something close to the data base and then moving to the model which connects the apps database and then I instead of going to see up to thee which is the vu I actually want to go to the controller which connects the model and the view then later I go to the so that's the sequence that I hear what I'm worried about is that hey i have a new parameters here and now we just add content which is the name of the variable that i have everything else is actually the same so i don't need to change anything here post params is a waste for radios as a security measures to forbid the users to add additional fields or change more stuff that they should do in my app web app now i close it and i'm going to the views you see that there's post so scaffold creates almost everything for you and the first thing that we wanna do is in the forms i know that now I have a new field so I have tied category author imageurl I just copy this section of it HTML and generate content and content and save it the next one edit calls the form template nothing to worry about it index I have to add another section so most of the time you don't need to know exactly how looks just put it there first and then we will adjust as I can you can copy this part and just change okay and then new calls the same form here in this show content which calls content and finally that's it so why don't we run and see how that goes so Rios ass and again and is that there's no login no nothing so it's not like something that we can just put it into production right every user can greatest post so now you see that there's content and I can actually add I have a big text field here but does watch update the post and now I can see now when I look at this this doesn't look like a blog it looks just like a table that looks kind of fuzzy or right now what I can do just as just in the screen I can do some magic so let's start with the index page in rails what happened is that by default it would create everything as AZ table like this but nothing stops me right to do the following I can actually do like this some HTML right and then I do post right here I'm editing in gr D so each so for each for array of toes for each of them right I will need each of these post as posts and for each and I will just put an end here because for each of these post I can actually just create a div right just for the sake of it but then I can put an H for and then I can for it small so forth the H for I will do as I just create the title for some category and I want to put another one let's say old with the author section and then all image now for the image I'm gonna do image tag and that will transform that tax URL into and put it inside of an image tag right and then finally the content I will put inside of a P right again there will be some adjustments that it's easier just to see it when we're learning Oh save and that's right so we have the information but there's some extra information here so let's check it out what's going on in rails which is the categories jumped it is is on the same line as the cham so what was happening here is that the h4 i'll be too small so I'll upgrade to h2 the small for rails for the category I might have to jump a lot right BR and then another BR here right so if we do this we see that we are changing the idea the category right I can even put the date of the post yep and then the tax the image it's there I can actually change the HTML later or the CSS for now look well and we need to just remove in somewhere it's [Music] shooting the results which is this section ok so then this whole table in theory you could just hide it right I was just commenting and then you have so that will look like more like a post they can change the height you can do this is not ideal for the sake of demonstration anyway so I can do it like this and then you can see the pose or in the table format you also saw that I was able to show as an image instead of URL so that pretty much gives you like this basic functionality of a blog post and you can even which pretty much is the core idea of developing web apps so it's like you have a court entity and that entity saves a lot of information either be as a text as a number as an image like anything else and I think when you master that that gives you the building blocks for all on the type of apps that you've seen out there from Shopify Airbnb and so on and so forth okay so that's pretty much what I want to show you how fast and interesting it is to create this blog post we're back right I can stop my blog and that's it then that covers pretty much our first ríos tutorial thanks for watching thanks for watching guru grow and let's go next one later bye

Channel: RubyBro

Views: 885

Keywords: ruby on rails, tutorials, ruby, programming, html, css, webapps, beginner

Id: 6yVo34QKUKc

Length: 27min 42sec (1662 seconds)

Published: Fri Apr 17 2020