Create A Fast Notebook App For College Courses With Active Admin and Ruby on Rails | Week 9 - 20in20

hello everyone and welcome back to week nine of the twenty and twenty challenge today we're gonna be using active admin and we're going to be using it to create a notetaking application so you're gonna have like a WYSIWYG editor so you know you can bold and italicize your notes each note will belong to a subject so you'd have like a subject for math science or maybe your classes or something to that effect you can search and filter it all using active admin and you know a whole bunch of stuff like that so we're gonna have like a whole back-end system where you can filter delete and do stuff like that and hopefully by taking what you learn in this application you can apply it to your own applications where you use active admin as like your back-end and then you sort of style your front-end so this is really focused heavily on using and configuring active admins back-end and then you can go out and find other tutorials that cover you know the front-end portion of this so this will make your life as the admin of that of the website easier and then whatever you create using this you also have the entire front end component that you can then render out in your you know general Ruby on Rails environments or your views controllers and stuff like that but yeah that's gonna do it for this short little intro I really want to get into the code this week so let's go ahead and let's get started okay so today we're going to be going from this blank rails application to this active admin application over here so when you open up slash admin / dashboard for this application you'll see that there's some recent notes so in this case I've created two notes there's some info here which is just some text right now and then there's your subjects so I have computer science and mathematics and I think both of these notes are CS notes they're not math notes so math doesn't have any yet but we can go over and do that in a minute you also have this nav bar up here so this is the dashboard let's go over to admin users and you can see here there's only one user account which makes sense because I've only created it for myself there's also some filters here so if you did have you know multiple users and you wanted to find any you can just do a search right here hit filter and it'll filter for you there's some comments and I'm not really using these it's a similar you know theme or you can add comments to your models and search your comments and stuff then we have our notes so right here I have two notes that are both computer science subjects here's the title for each of them and then the body now the body is truncated so that it doesn't flood off the screen and then we have like the created and updated at and these times aren't accurate because it is not 138 right now but if we come back to computer science you can see here this is what our subjects page it looks like so on an individual subject you have all of the notes you've created for it so I have the halting problem one here and then I have one more right here and if I come to all subjects you can see we have computer science and we have mathematics now in our notes we're customizing this table but in subjects it's just the default table because I don't anticipate that any of these are going to run off the screen now of course for all of these you can filter so you can filter by your notes or you can filter by your name so maybe we want to look for a no math or on a filter and you can see here it's just showing math we can get rid of that again or we can just like search for a computer and this will also filter it then we can hit clear filters and stuff like that so yeah that's basically what we're gonna be building let's go ahead and let's get started so the first thing I'm going to do is I already had the server stopped that's how I open up vs code but the first thing we need to do is come over to active admin info so I'm just gonna you know close that out and once you get on this page I have a link to it in the video description you go over to documentation then you have a getting started guide along with installation and setup now there is an option to use web Packer for this I'm not going to be using it without using web Packer it's going to put the assets inside of a Bassets and then in here so if you have JavaScript that'll still go into assets if you use web Packer it'll put your JavaScript files into this JavaScript folder and then it'll go I think into packs but we're not gonna be using that for this application we're just gonna be using the basic cookie cutter build so we're gonna start by adding in our active admin gem and we're also going to add into so I'm just gonna run bundle add active admin now there is no space or underscore here so you can just type it as one word but when you run the generators there is an underscore as you can see right here so that's a little weird but we're now going to say bundle add device to add device to our application that way we can use all of our devise goodness whenever we want to and of course if you're using active admin generally you use it to like have a back-end to your front-end so you might use this to like manage the content on the website and then the front end users just see it but we're not using this application like that because I really just wanted to show how active admin works you know so it's a bit of a primer and then hopefully what I show you here is enough to get you up and running but now that we have active admin added we can say rails G active underscore admin colon install to actually install active admin and then we can run our migration and then we should be good to actually start creating some resources so there is a two-step process when you create a resource inactive admin so I'll just run the rails DB colon migrate command the first thing you need is to actually have a model so like right here they say you can register a model but that's great you actually need to create it first so this generation command doesn't create the model it only registers it so if you want to start by creating your subject you need to say rails G model subject and then give it like a name and you can hit enter and then if we try to run the generate command we're still actually going to run into an issue here so if I say rails G active underscore admin colon resource and I pass in subject we're going to get an error here because we haven't migrated our database since we've created this model so active admin doesn't really know what it's doing here so if you run a rails DB colon migrate command again to migrate the database and then we run our rails G active admin resource command now it should be good you register our subjects and what this does if we come over to apparently I already had this come over to here yes it creates this admin folder which has admin users right here it has the dashboard which is what we customized to create this recent notes thing so you can see right here the default example is just this blank slate and some comments but we'll you know modify this and then it also creates this subject RB so you're basically connecting your models to the subject that are or to the model equivalent inside of the admin folder and that's how you're hooking up all of your logic so you don't deal with controllers or views here you're kind of doing it all inside of this like models plural dot RB inside of your admin folder so now that we've created our subjects let's go ahead and let's do a rails gene model for the notes so we're gonna have a note each note is going to have a title it's also going to have a body of type text and the title is just going to be string by default so you don't need to put colon string after that and then it's also going to have a subject : references or you could even I think do it belongs underscore two here and it would set this up so let's try subject colon belongs underscore two and see if this works so my understanding is that colon references just adds the migration and belongs to if we come into models and note it sets up the relationship for us so we have that in our note but we do inside of our subject still need to say this has many colon notes so now that we've done that we can do a rails DB colon migrate command again to migrate the database and then we can do a rails G active underscore underscore admin : resource for the subject as well and that will generate our resource and then we should be good to actually start up our application and see what's happening oops did I say subject again I meant to say v4 note so now that that's done the next thing we should do is if we haven't already and I don't remember if we have so let's just do a rails DB : seed command to seed the database real quick and if we come into our DB folder and our seeds dot RB you can see in here that all this is doing is it's doing an admin user dot create it's creating an admin user with an email of admin at example.com and the password of password and it's only doing this if you're in the development environment so now let's go ahead and let's run a rails s command to start the server and if we go to localhost port 3000 now you'll see that nothing has changed because this is still just the front end but if we come over to slash admin you can see that it tells us what you need to sign up or sign in before continuing so if we type in admin at example.com with a password of password I'll just check reminder remember me and then we hit login we're now greeted by the dashboard so with those commands that we just ran we managed to generate this entire application so we have our dashboard our admin users which just has our one admin user in it we have our comments again which we're not using we have our notes but there are no notes yet and we have our subjects but what happens if we try to create a subject if we try to create a subject we'll give this a title of let's say chemistry because that's what it's suggesting right now if we hit create you'll see that there is a activemodel forbidden attributes error so what does that mean well basically you have your attributes and your parameters that you create inside of like your you know you normally handle your parameters in your controller but we don't have those controllers right now so we need to actually permit these parameters in some other way so if we come into let's say like our subjects dot RB so inside of our app admin subjects down our B file we need to actually permit some of these parameters so let's start by just saying permit underscore params and this has a name and also has some note IDs which are just an empty array so if we do this and we save this and then we refresh and hit continue it should successfully create this subject so now we have a chemistry subject you can see here are the details - the name is chemistry has created at updated at and we can just say not my strongest skill more of math man myself and we can add the comment and now you have this comment here and you can see you can delete the comment or you know go over to the user or whatever but that's great maybe we could do a little bit more here what happens if we want to actually show like I don't know something in here right so if we come down here and we want to change this from this weird subjects page to our own custom show page we can just say show we can set the title to be like my title then we can create a do block and let's just go ahead and save this and see what happens if we run this empty show so you can see it gets rid of everything which obviously is an ideal because now we need something on this page so maybe we want to like add in a title so let's say h3 you have + let's do like the number of notes so this is a subject that notes that count so we're going to pluralize that and we're going to say note so if you have zero notes this will change two notes if you have one note this will stay singular if you have two or more it'll change two notes with an S again let me just fullscreen this and then after this we can just say for this subject so let's go ahead and save that and see what happens when we try to refresh this page so now you can see you have zero notes for the subject pretty cool but what else could we do well we can come down here and we can say you know subject dot notes that each do note and you'll see this is very similar notation to what you would normally do and then we can do a div do block so for each knelt create a div give an h1 with the note title and then maybe like an h4 with a link to the note so we'll say you know this has a note that I D and you can see I'm using a couple different ways here just to show you how you can style and use all of these things so here we're using like you know our embedded strings to say you created this note note that created at that strf time and for this I used strf time dotnet I think strf time dotnet so you can come in here and maybe you want to grab like the month byte the name and then add a space and then say like the day which is 1 to 31 so you can just use this to customize it and what I ended up coming up with is this string which is day the the month the day of the month the year and then this times 11:07 p.m. so we'll just come in here and we'll save this and we'll put in the strf time so after this this does need to be inside of a string and then we just paste that in and then after this we can say comma and then we need to pass in the note now we can't just do the note like we normally would because we're in a different sort of route structure so we do need to say admin underscore note underscore path and then we can pass in the note and that'll give us slash admin / notes slash one if we just did note you know it would try to go to the actual note path which is what you would use in like the front end of your application that's not what you're using here inside of this so let me save this and then come back to the application I'll refresh the page you'll see there's no errors but we also have no notes yet so let's come over to our notes let's try to create one will say subject chemistry organic chemistry and we'll just say I really hope I pass on you can see here there's no WYSIWYG editor yet we do need to actually create that so that we can like bold fonts and stuff but if I hit create you'll see we have another forbidden attributes error and that's because we haven't permitted these attributes in our notes dot RB yet so let's come over to our notes dot RB and let's start by permitting the title the body and the subject ID so let's save that then we can refresh this page we'll hit continue and you can see here that there's undefined method permit because I didn't say permit params I just said permit and then let's try to refresh one more time after we've done things properly you can see here our note was created so it has a title of orgo chemistry I really hope I pass and the subject so let's come over to these subjects and you can see there's an error in our subjects page so we have created at with two C's obviously don't want that so this is right here let's just fix that can't believe I missed that but I'm gonna leave this in because this is part of the process you know you don't always type everything perfectly as much as the editing that most of us do tries to fool you a lot of us actually do make quite a few mistakes so you can see here you have one note for the subject you created this note on Monday May eighteenth twenty twenty at 3:09 a.m. and again these dates and times are going to be wrong but for now this is fine if you do want to fix that you need to you can look up how to set like your UTF time for your rails application and you can like create an initializer to set it to the correct time zone or something to that effect but now that we have this let's maybe you know come over to our notes let's create a new note and let's maybe customize this notes form a bit so we can come into our notes out our B file here and we can customize this form of it so we can say something like a form title is notes app do F and and just like with our show before so we had like that show with a title of blah blah blah we can also do that for forms you can actually customize all your views just by using these quick little blocks of code but what we're gonna do is we're gonna say this has some F dot inputs and I call this note and then we're going to just do a normal do block and then it will say for F dot input let's give it a subject let's say it also has F dot input for the title and let's maybe leave the body off for now and then we'll say F dot actions and we'll save this and then we'll see what happens once we save this so if i refresh you can see the body's gone but overall it still looks vaguely similar to what we had before we can then add in our body so we can say F dot input body save this and we can refresh the page and the reason we're doing this is so that we can actually use our WYSIWYG editor here so if we come over to the active admin github page actually has a section for plugins so here you can see all of the different integrations you have so you have like you know your validation settings simple form paper trail versioning you know stuff like that but if we come down we can actually find the section on WYSIWYG editors and what we're going to be using this active admin kwill editor so if you follow that you'll come over to this github block notes active admin quill editor page and then if you scroll down you can see the editor that that was using so we're gonna go ahead and follow these instructions so the first thing we need to do is we need to add our quill editor gem so we're gonna say bundle add active admin underscore quill underscore editor which is going to add that to our gem file so if I open up our gem file and scroll down you can see at the bottom here we have the quill editor it's also going to run the bundle command for us the next thing we need to do is at the end of our active admin JavaScript's file so this is going to be inside of app assets Java scripts active admin we just need to add in these two and then we can come into our app assets stylesheets active admin and we just need to add in this import and it wants us to add both of these to the end so I'm just going to add them after the other import statements and now that we've done that we should in theory be able to say rails s to start the server and then we should be able to come over to our Notes app and then our admin notes new and refresh the page and we should see absolutely nothing change why is that well just like with you know in rails you are with action text you have like your rich text editor so you'd say something F dot input as colon colon rich text area or something or like F dot rich text area for the body or I think content is even what they use on the documentation x' instead of doing that we're going to be using quill editor but we do still need to actually call that somewhere so if we come into our notes RB so this is our app admin notes dot RB where we have our resource after this colon body we just want to say as colon space colon qu i ll underscore EDI teo r4 quill editor we'll save that and then it will refresh our notes application and now you can see we have this WYSIWYG editor so we'll create another thing for chemistry we'll say I don't know like balancing equations and then you know you just have like um a lot of people find this hard for some reason I don't though because I'm really smart you know I would argue if you were actually smart you probably wouldn't spend your time typing this in your class but let's just say for argument's sake you do that so now I'll create this and you can see that our note was created our HTML is here our markup is here but it's looking a little weird so maybe we need to change what the admin notes show age looks like so let's come back into our notes dot RB and let's say something like for the show page let's give it a title of your note and I'll say do and maybe we want to say h1 linked to the note title and let's just go back to the note or the admin notes path we can also create a h4 to link to the note that subject dot name and we could say this is the admin subject path for the note that subject and then you could say div with a class of note colon note - body do and and then here we can just say raw note body and this is what's going to cause this to actually show up on our page so if i refresh now you can see our HTML is here our quote is here but we need to actually create the CSS class to kind of make things look a little bit better I'm not a front-end styling developer kind of person but you know we'll give it a shot so let's come into app assets style sheets active admin and down here let's just say the note - body and then we'll just give this like a padding of 1e m a margin of 1e m a background - color of e6000 and then let's go find a WebKit so we're just gonna say like back drop shadow generator CSS or something to find something that looks similar to what we're looking for here so you might find this tool at CSS Medicom slash box - shadow you play around with the generators until you find something you like and then you just copy it and paste it in here into the note body so in my case I ended up going with this so I have the ten pixels across and some five pixel offsets so if we just change this so you know our spread I think I had set to like let's just mess around with this a bit to make sure that I'm not you know making stuff up so let's give this a color of e6000 to be e 60-66 e 60 66 so it gives us that let's give it a spread radius of I guess 5 is fine a blur radius maybe you can update that let's maybe bump this down a bit let's give it like I guess 10 here is fine maybe even like 5 and then maybe like 2 here and then you know some opacity of like maybe 29 or something so you know you just play around with it until you find what you like and then you copy it and then you just paste it in so I'll just grab this because it looks good enough and then whatever you end up going with you know you just tweak it a bit in here until eventually you come across the setting so in my case it was just 10 pixels 10 pixels 5 negative 5 and then the RGB a was 0 0 0 and then point 2 9 opacity so that gives you those settings you do still need to set your background color and stuff but once you have that you can come over to your dashboard which is this one and then you should be able to refresh your admin notes page and you should see your new CSS styling here you could of course add in your titles inside of something as well but that's really not the point in this video so now we have our notes dot RB setup we have our you know our form and our show page maybe we want to when we come to the notes page style this a bit more because right now if you have a really long post this is just going to go off and do oblivion so maybe we want to create like an index page so for this we can just say index do and and I'm not going to give this a title or anything I'm going to start by saying this is a selectable column and then I'm gonna save that and we're gonna see what happens it's always important to you know try out an experiment just so the you know it makes you more comfortable so maybe we want to say column for the subject sounds good so let's just go ahead and save this refresh we now have a subject okay what else can we do well we could say there's a column for the title and then we could say do note and and then we can say link to the note title admin underscore note underscore path passing the note so it's good refresh the page once that saves we can refresh the page so now we have the title of our notes let's now say for the body we want to do the note and we want to say raw note that body that truncate on your score words and let's just truncate at a 25 save that and then we can refresh so now that's truncated I'm not sure how evident that is maybe I'll switch this down to like five or something and then we can refresh and you can just play around with us until you find something you like yeah so there it's actually truncating it so I'm gonna leave it at 25 and then down here let's just add another column for the created at and one for the updated and so now let's save that refresh the page and you can see here if I fullscreen we have this whole application set up like this so that's good for our notes d'Arby let's come over to maybe we want to let me just look through my files see what else I changed I think we also have like our subjects dot RB styled a little bit so let's come over to subjects dot RB we actually have all of that done so I think the last thing to cover really is just the dashboard then so if we come back to our dashboard you can see that we have nothing in here yet but it says if you go to app admin dashboard dot RB you can customize it so app admin dashboard RB is this file and let's just fullscreen this and take a look so this right here is our title which is just saying you know it's got like the welcome and call-to-action etc and this is the example they give you so let's go ahead and let's just get rid of that and let's just create our own aigis so let's say you have like columns do and you have column do so for each individual column you then have panel we're gonna say recent notes do and and then for each of these we're gonna have a ul and then we'll say note that order created at the ESC dot first so we're gonna grab the first five of these and we're going to say dot map do note and and then we can just say each of these is an Li with a link to the note title and it's the admin note path and we'll pass in the note so let's save that and see what what happens when we run this right so if we refresh the page we now have recent notes spanning across this entire thing maybe we want to do a little bit better maybe we want to like have half and half and for that what we can do is we can come down to where this column ends we can create another column so say column do and and let's just give this a panel of info and then we'll just give this a paragraph where we say welcome to your notes application its power oops it's is powered by Ruby on Rails and active admin and we can save this and see what happens so I'll refresh the page there's our info card cool let's now come down here and after this first set of columns let's create another set of columns and we can say columns do and column do and panel your loyal subjects do and then let's do another ul and then we can say let's grab all the subjects and order them by their name in ascending order and then map this to subject and and then we'll say Li link to the subject name admin underscore subject underscore path subject and that should be it for the dashboard so now if we save this we'll have two sets of columns first set will be half and half second set will stretch all the way across so let's come over to our subjects create one more subject we'll say this is for computer science and then we'll just create this let's come over to our actual subjects page let's view our chemistry you can see there's two in here let's go back let's view our computer science so there's none in here so let's come over to our notes let's create one more note this will be for computer science we'll say the halting problem and you can put in whatever here I just have this brilliant org slash wiki slash halting problem page open and then I'm just going to copy I guess this proof right here so let me just fullscreen this and where is it so proof by contradiction I'll even grab the the whole thing so we'll just copy this and is that going to copy over one-to-one cuz that's really not the point of this application but if we paste this in here you can see that some of the stuff is preserved like the spacing and then we'll just create the note and now we have you know our proof by contradiction for the halting problem here so let's come back to our notes and now if we come over to subjects we should have our computer science subject so let's go over to that you can of course make your computer science subject to link or whatever and then you have the halting problem right here so that's I think that's the gist of what I was hoping to accomplish today you know it's a very powerful framework if you use it and you don't need to like do a whole bunch of custom code rollout for it as long as you're not trying to change you know core funk ality of how the admin panel works you'll be set this is great to use if you have like a whole bunch of custom solutions you need then maybe this isn't the way to go and you should just build your own back-end panel but I hope that this helped you know it's a little bit different from device although it does use devise but whenever I talk about creating a back-end this is always in the back of my mind for what I'm sort of going for and hopefully now you can see why it's very powerful but again you'll always want to decide which tool is better for the job is it better to do your own solution or can you save a whole bunch of time and just use something like Active admin but yeah let's go ahead and let's move over to the outro okay so that's gonna do it for week 9s video I know this was a little bit late I've been pretty busy I'm not sure how the regularity will continue from this point on but hopefully at the very least we always get a twenty and twenty up so done each week but you know thank you for watching if this video helped please remember to like it if this video didn't help remember to dislike it because it helps other people when you rank this video lower or you give it a lower score because then they know this video is not worth their time it always helps me out when I see a video that has like 80% as like an upvote ratio because then I'm like a probably don't want to watch this one oh but yeah that's gonna do it for me if you want to see more of this I think we still have 11 weeks left so there's plenty of 20 and 20 challenges going on each week will be a different rails application there's also some other rails videos that come out software engineering business II stuff whatever you want to talk about so yeah consider subscribing all the other youtube jazz but that's gonna do it for me thank you so much for watching and have a wonderful day [Music]

Channel: Deanin

Views: 2,330

Rating: 4.9506173 out of 5

Keywords: deanin, deanin rails, notebook app, ruby on rails, active admin, activeadmin, ruby on rails 6, rails 6, rails 6 active admin, notebook application, code a notebook, coding a notebook, note taking app, note taking application, programming for beginners, beginner project rails, beginner projects rails, rails 6 beginner projects, rails 6 beginner project, customize active admin, how to change active admin, active admin show page, active admin index page, active admin views, dean

Id: DfaaTkzOoHo

Length: 35min 20sec (2120 seconds)

Published: Mon May 18 2020