Create Your First API Using Rails 6 And Serve It To A Javascript API User | Week 4 Part 1 - 20in20

hello everyone my name is Dean and welcome back to the 20 and 20 challenge this is week 4 episode 1 I realize this has been delayed until Friday it's kind of because I've you know sort of changed what I was planning on doing I didn't like the way that the project I was working on was working the sentences are hard so I decided to go with this approach instead so I'm gonna try and use an API for it which might be a bit more interesting but the first step for next week's project which is now next week's project and so this week's project is to create an API and sort of figure out how API is with Rails work so for this week what we're going to be doing is a very basic to-do list application the catch is we're going to be creating the to-do list application in basic HTML in JavaScript and we're going to be making a request to a rails application that's running as an API so we have our back-end which is the rails application which is basically just serving as like the controller for requests and the like models for the database but there is no front-end because when you do the rails API flag it is strictly creating the controllers in the models and then for our front-end that's going to be served out of a just random folder that I have on my desktop where I have like a index.html and an application that j/s file so next week hopefully if I can get everything working right we can use the same setup to have a react front-end for our to do list application and we'll have a rails back-end so I'll be running a rail server and I'll also be running my react project and then in my react project I'll make requests to this rails API is this the most efficient way to do things almost certainly not but I feel like this is a great way to sort of learn how to you know interact between different projects use api's use like you know different tools for different occasions and I think it'll be a fun experiment because I have no idea what I'm doing and hopefully you guys will learn something when I get the videos out where it looks like I do know what I'm doing but for this for one all we're going to be doing is creating this little HTML project that gets all of the to-do list items out of the rails database basically and then for part two we will go through and will actually create a form so you can create new items in your rails project with this HTML project thing so you'll be able to make post requests basically and then I don't know part three might be like styling this or something I haven't really decided yet but yeah that's gonna do it for me for the intro let's move on to some code alright so the first thing we're gonna do is we're going to create a new rails app and we'll call this to-do underscore API and I'll call mine episode 1 and then we're going to do - - API afterwards and this is going to tell rails to generate this as an API so you'll see it remove a whole bunch of stuff here which is going to be your front-end stuff so that your views won't be in the application and you'll also see that we're not running web pack when we do this so now we can see D into - duze underscore API underscore up so one and let's type code dot to open this up in vs code or whichever editor you would like to use for this so I'm going to drag this over and let's now do a sanity check so let's do a rails s command almost tried to type localhost for 3,000 there so if we do this and hopefully this starts sometime this year my computer is having a bit of a hard time today but if I try to run this it should say welcome aboard yep you're writing Ruby on Rails so this is the same as it usually is but let's create a scaffold now so we'll say rails G scaffold we'll call this to do and we'll give each to do a task of type text so that's going to generate a couple things it's going to create the migration the model it's going to do some test stuff that we don't care about right now it's going to do the resources and the controller the one thing it's not going to do though is if we come into app views you're not going to have a like a bunch of pages that you can navigate to here but we can do it rails DB : migrate man now to add these tables to our database and then we can let's create just one of well actually let's leave it blank for now so let's start the server so we'll type rails s to start the server and then it's still saying we're writing Ruby on Rails but we can change this either to be our route or we can just go to slash to dues so if we come to slash to dues and I bump this up to 150 so you can see there's just an empty array right here and the reason for that is we don't have any to-do list items yeah so let's kill the server and type rails space see to open up a rails console and then let's do to do create let's create one with a task and we'll say we made this from the rails console we can hit enter and you can see here the transaction was successful and here's what our to-do looks like so it gives us our ID the tasks created at and updated at so now we can type ctrl D to exit and then let's type rails s to start the server again and when we when we refresh the page this time we'll have this little bit of JSON right here that has our tasks in it the other thing we can do is we can come into our DB folder and our seeds RB and in here we can type 10 times du and and we can say to do dot create we'll create a task and we'll say this is a seeded default task so we can save that and then we can come over here and we can stop the server again and then let's type rails DB : seed and this will add these 10 tasks to the database and once that's done we can type rails s again to start the server you can refresh the page and now you can see that we have a whole bunch of stuff in here so if we try to like find our first task which we know has an ID of 1 we can go to slash to do slash 1 hopes to slash to dues slash 1 and this is going to be our individual task so if I hit f12 for example and I say let asked equal this little bit of noise we can then do tasks that task to get the string because this is just in you know easy to read format we can also use this to grab like the ID later so let's say we want to do something like format it so it's like the task ID colon and then the task body right here so to do that we would say something like a string with this square bracket and let me just bump this up so you can see what I'm typing here so we do the square bracket plus the task ID plus another square bracket to close it off and then let's do like a colon plus the task dot task so something like this so this is how we can format it so that's Beit the basic plan of what we're going to do but I thought it doesn't really make sense to use an API from inside of the same application it also doesn't really make sense that you would have an API that you only serve like similar application stacks with so what we're going to do is we're going to create a we're going to create a separate HTML little application that just has like an index page and some JavaScript that way it's like completely separate even from the idea of Ruby on Rails but the first thing we have to do for that is we're going to be doing some like across origins stuff because we're gonna be doing it from outside of our localhost so we need to search for the rails oops rails Co RS gem and this should give us rack - course so if we open this up we can scroll down and we can add this to the gem file so just below boot snap oh right here it actually already has it in the gem file that's pretty funny so let's save this after we uncomment it and then let's run a bundle command so that'll install it and the next thing we have to do is add this little config bit to our config slash application RB so what we need to do is we need to come into I think we were doing the application Darby so inside of this module and class and you can see right here all of the framework stuff we have required thanks to Rails we need to do this config middleware dot insert underscore before zero and let me actually bump this up so you guys can see what I'm typing based on the github page so this is the block we're doing because we're in rails well I guess we're in rails 6 now but we're then going to type rack colon colon see ORS do then we're gonna do an allow do and if you don't have these things your application you're probably gonna run into some issues because we're going to be doing some Ajax stuff well I guess we're not really we're doing X HTTP requests and it's going to say you know request origin headers bad B be better or do better and this is how we're going to avoid these errors so we have the origin set to just the wild the wild card and then the resource is going to be the wild card and the headers are gonna be any and the methods are gonna be get hosts and options which will allow us to do the get and the post and when I save this I'm pretty sure Robocop's going to fix my formatting here and add in this percent I like a graceful gazelle so after we have this percent I changed because I guess this is the better way to do it we can save this and we can start the server again and if we come over here and refresh hopefully everything is still working looks like it is okay so that takes care of the rack portion of this setup the next thing that we should do I guess we can change which IP address we're running on just so that it's a little bit different so let's do a rails s and I think it's what is it - B 0.0.0.0 and then - P for the ports I'll set it to 3001 so now if I want to come here I have to type in localhost port 3000 and 1/2 deuce just trying to show off a couple different things you can do here so let me move this over here and oops I do need to actually open that so let me we have this blank folder right here that we're gonna open up with a I'll open this up in my text editor okay so once we're in here the first thing we'll do is we'll right-click new file let's create it index dot HTML and let's just create a quick HTML document so I'll just say doctype HTML and we'll do some HTML tags and then we'll give this a head the head has a meta charset equal to UT f 5 - 8 it has a title and the title we'll just say is my - duze our my to-do list maybe and we can create a body and the body will have a h1 that'll just say homepage or something will then give it like a div with an ID of container and then in here we'll just say like to do number one and to do number two and let's maybe do like a br tag just so that that all looks okay and then we'll create a footer which is where we can put in some JavaScript so let's come over and I guess we can open this up and this is what it looks like so maybe you know we can style this a little bit we'll just give this a style of text align - Center which puts this in the middle and then maybe we'll give this a style of I don't know margin - e/m border of sporter of two pixels solid black something like that pretty sure I messed that up there we go refresh so you know just something super simple where we can see what oops what what the - dues are basically so what we can do here is we can replace these two dues instead of just having to do is hard-coded like maybe our first to do like to do number one is make the bed and to do number two is record a video you know that's a lot of work so maybe we want to use an API for this so that we don't have to deal with this that someone else does yeah so like we just make a call to the API and someone else does some weird database magic or maybe you're using like react and you want to use this you want to use like an API back-end or something this is sort of how you would go about doing something like this so the first thing we need to do is come down to our footer and let's create a script we'll say the script type is text slash JavaScript and the SRC is just going to be we'll call it application Jas so we'll close this off and the s code will close off the script tag for us so we can now save this and then let's create this file so I think we called it application Jas so let's come into application Jas and let's create a function called get tas oops and let's also call this function down here so say get tasks and then let's maybe do like an alert that just says this ran refresh the page this ran so there you go that's working let's start off by creating a var for our xh x HTTP and then we'll say this is equal to new XM l HTTP request so now we have this request stored inside of our X HTTP variable and then we'll have like a X HTTP dot onreadystatechange we'll set this equal to a function and we'll just close this off real quick so let's say if this readystate is equal to 4 and this status is equal to 200 so if you're ready state is 4 and your status code is 200 then you can like do or like add the JSON stuff but after that we come out of here and then we can say X HTTP dot open so let's open a get request and if we come over to I guess I closed it but let me just type localhost port 3001 and then it's slash to dues so this is where we want to make our request to so we'll open up some quotes and inside of this we'll type well I guess we'll paste it in when I copy this it automatically adds in the HTTP so HTTP colon slash slash localhost colon 3000 1/2 dues and then we want to do this asynchronously so we can do true because you can see right here it's saying async is a boolean so set that to true so once that's done and let me just move this over so we have a bit more room to work with the last thing we have to do is say X HTTP dot send and now we'll come over here will refresh the page and everything will work right not quite we still haven't actually added the JSON stuff so let's start by we have our index page and I'll actually move this down here so in our index page we have this div with an ID of container so let me get rid of this these two tasks so if i refresh those are gone let's grab this container and because we're not using jQuery we're gonna have to do it with good old fashioned JavaScript so we'll say document dot get element by ID and container and then we'll say let responses because we need to we need to actually parse the responses that we get back so we'll do json dot parse this response text so if I just do a console that log with this dot response text you should be able to see what the X what what it looks like when we get this stuff back so it's giving us back an array of objects but if I were to say let's do something like this let's say this response text and let's do like window dot response text equals the stud response text something like this so if i refresh the page I do the response and then I can say response text is that whole string what happens if I try to grab the first element the first element is just the first element of the string but if we do this if we do this responses thing so if I say window dot responses instead window dot responses i refresh the page now if I do responses you can see here that if we grab one of these elements like let's say I grab loops let's say I grab responses 0 this time instead of grabbing the first element of the string we're grabbing the entire object so here I can say response is the task which gets us the task or like the ID so in the same way as before when we did you know we tried to block this in with the task ID right here you can see autocomplete instead of doing task ID what we need to do is responses 0d and then this one's going to be responses 0 tasks so if i do this it's the same thing but it's coming from this other server because we're using this the server as like a knight or as an api and here we're grabbing this whole thing so let's get rid of this window responses let's switch this back to a let and get rid of the style so we're gonna have to go through each of these because here we're just doing 0 so let's say let or for VAR I equals 0 I is less than responses length I plus plus and then let's do container dot and now normally you can do like inner HTML but I'm really not a fan of that because it's kind of destructive so instead let's do a insert Jason HTML and this takes two arguments the first is where it goes and the second is what goes what goes where basically or what goes there so first it's the insert position and this has a string that you can put in so you can either put in after begin after n before begin or before end if you do before begin it'll go in before the HTML begins if you do after begin it'll go after the HTML begins but before everything else in the HTML and similarly for after end and before end so let's do a after begin so this is going to put it after The Container begins so if we come over to our elements it's going to put it right in here if I can edit this as HTML this is the after begin location so it's just gonna plop it in right there which is exactly what we want for this so we'll say after begin comma we then need to basically recreate what we have in our consoles here so we'll start with the square brackets so we'll do this for the array will append the responses but this time instead of zero we'll do i dot ID and we'll do another square bracket with a colon then we'll do a plus and then we'll do responses i dot task so if we save this and if i refresh this page it's all here but it's not like entering a new line each time and to fix that we can just add in a br oops a br tag and close it off and there you go so now it's adding all of these in the order that we're sort of getting them in so we get the first one then we do a before insert then we do another one then we do another one so it's kind of creating like it's adding these in the reverse order basically so there's two ways to fix this the first you could do is like VAR I is equal to responses length minus 1 and then while I is greater than or equal to 0 decrement I right so refresh and now it's in the right order I guess if the right order for you is oldest first but that's kind of you know really weird to do it like that so maybe we can do it a bit better and of course we can otherwise it wouldn't be mentioning this let's instead of doing after began we can just say before end and then refresh the page and you can see here it does the exact same thing so if we switch this to after begin refresh it is newest first and then before and it is oldest first so it's as simple as just switching this one line which is sort of why I like this better than just saying innerhtml yeah I think that's probably going to do it for this first episode on using an API from rails inside of a different application I don't know what this episode is gonna be titled yet but that's the premise I guess so I will see you guys in the outro and then probably part two where we you know make a form that lets you do the post request ok so that's it for part 1 of this weird API thing I still don't have a name for this week's episode series thing so we're just going with weird API thing for part 1 I think I hope this helped if it did help remember to like it so that other people can see it and if it didn't help remember to dislike it so that we don't subject other people too bad tutorials if you guys want to see more of this don't forget to subscribe shameless plug I know and I will see you guys in part 2 where we create this form inside of our JavaScript file that's in our HTML application that's working through our rails API server project thing definitely gonna have to work on the branding for this week I'll see you next time [Music]

Channel: Deanin

Views: 7,197

Keywords: API Hello World, Create API, First API, Hello World API, How To Create API, How To Create Rails API, JSON API, Javascript API, Javascript API Requests, Javascript How To Use API, Javascript Keep Changes, Javascript Todo List, Javascript Use Database, Javascript use API, Rails 6 API, Rails 6 API Hello World, Rails 6 First API, Rails 6 Hello World, Rails 6 Javascript API, Rails API, Serve data to Javascript, deanin, rails tutorial, ruby api, ruby on rails tutorial

Id: 3pZteSkmI9w

Length: 24min 35sec (1475 seconds)

Published: Fri Apr 10 2020