Create Your First Frontend Javascript API Form And Serve It With Rails 6 | Week 4 Part 2 - 20in20

hello everyone and welcome back to the Ruby on Rails 20 and 20 challenge this is week 4 part 2 in part 1 uploaded yesterday we created the basic API in rails and we started getting some of that information through a XML HTTP request in a basic JavaScript HTML application today we're going to be extending that application a little bit by creating a form that allows you to make a post request to the rails API so you'll be able to like enter silica to do this task in your application like your HTML application hit submit and it'll submit it to the rails database you'll get a response and then you'll have this new data added to your to do list on your client side so you're sort of continuing this idea of using the rails application merely as a back-end API and having a completely separate entity that operates as the front-end or like uses your service or something if you do find these videos helpful you know remember to like them if they're not helpful remember to dislike them so we don't subject other people to them and you know subscribe and all that other good stuff and I will see you guys in the code right now ok so the first thing I want to talk about real quick is if we come into our config and our application dot RB I just want to say thank you to lucky 7 from the previous episodes comments and I'll have something on the screen right now for pointing out that we don't actually need this middleware config in our application RB so we can just get rid of this and the reason we don't need it is because in outside of our config initializers folder there is actually a course dot RB file and in here you can see that they already had a template set up it just wasn't mentioned in the github repo so if we just go ahead and uncomment this you can we'll change this from example.com to an asterisk and then I'll just save this and the project should work basically the same way it did before if I paste this in you can see what it looked like before compared to what it looks like in here so really the only difference is that your headers are right here and the methods if I just backspace these over and then I backspace this it looks basically the same it's just set up with a full call to Rails application instead of this config variable but we'll just get rid of these changes and save it like this so that's the first thing I wanted to talk about so let me just go ahead and restart the server and I'm running it with rails s - P 3001 to have it serve off of the local host port 3001 so if I come here you'll see the Ruby on Rails thing and if I go - slash - duze you'll see our API is serving us all of our to-do items okay so now that that's out of the way let's come over to our previous JavaScript HTML project thing that we were working with and let me come over to the application jeaious so what I'd like to do today is create some sort of form that we can submit tasks to the database with so what I'm thinking will do is if we come in - so in here we'll need some kind of function that's like should we call this we could do something like send form oops so we'll say like function send form right and this will have some brackets or whatever and then that's the end of that function call so inside of our index we'll need to actually create the form in our HTML so if we come into our body let's go below the home but above the container and let's just say form and we're going to need to give this a couple things it's going to need an except charset which is equal to UT f - 8 we need an action and for this it's just going to be your like the web page you visit to do this so because it's the create action it's going to be localhost or at 3000 1/2 dues because when you go there it'll automatically handle the posting and then we also need a method which is equal to post POS T and we also need to give this an ID equal to the to do form so that is that we can then enter down and add in two extra fields right here so the first thing we need is an input I'll just type input the type is going to be text and the name is going to be to do task because inside of our rails application if you were to look at an actual form when it's created this is sort of the format that they use for the names so this will pass and the task as a to do parameter so inside of your inside of your controller you can do something like params to do and then tasks or something like that but once that's done the other thing we need is a value which by default you can set to like the empty string let's just give this a value of like example and that's it for this input so let's add in a slash to close this off and then let's do one more input with a type equal to submit the value equal to submit and then on click equal to well actually let's leave the on click off for now so we'll just close this off hit save and my formatter will automatically format these things so let's come over to well I guess I have to actually open this so I'm just going to right click and open in the default browser which I have in vs code because of an extension called open and browser appropriately named if you don't have that you can of course just drag this into your window so if I like open up a new tab here you can also just do oops not from there let me open this up in my file explorer so reveal and file explorer so if you open up a window like this and you navigate to your index you should just be able to drag it over to your browser or just open it with whatever you would like to so like in this case it'd be Chrome but you know any of those options are going to work for you so if we come over to our index and I actually open it we now have this form here which has example in it but if I hit submit it's going to submit to the two do's API and now if you look at the URL we like completely changed our location so instead of being in our default app right here and if i refresh you can see that example is down here is number 13 so we can say like this is the 14th to-do item if I hit submit we're going to go from D slash site slash API task user slash index dot HTML into our rails application and we really don't want it to work like that so what we can do if I come back here and I remove this so what we're gonna do is we'll add in an on-click I'll set this equal to window dot send form event we'll save that so now we can come over to let me just close this extension we can come over to our application j/s and i'll close this index.html for now and we can flesh out this send form function so what we have now is we have a window call so let's say window dot send the form is equal to a function which takes an event and again we're not doing this in the most optimal way we're just doing this as sort of an educational exercise of course if you if you wanted to you could do this in a myriad of other ways I just prefer to you know sort of do things in a way that makes it clear what's happening so let me actually get rid of this event prevent default so when you have a window dot whatever variable as we've covered before that allows you to even in loops even in your console you can say like a window all right now you can say send form and access that function from in here so if I were to just change this and say alert I sent the thing and save this if i refresh the page and then call send form and I hit enter you'll see that the alert is running so that's sort of what's happening here and because the event is going to have a default like go to the thing call to prevent ourselves from being sent to whatever page we're just gonna add in a prevent default so if I hit submit we're no longer going to the page and if I get rid of this and I call this it's still taking us to the page so that's sort of why we're doing that so we're gonna leave in the prevent default here we're now going to create another XML HTTP request so we'll save our xhr or you could even call it X HTTP is equal to a new XML HTTP request and then we'll close that off so here we're gonna say X HTTP open because we need to open a post so we're gonna say open post and quotes comma and we're gonna say HTTP colon slash slash localhost port 3000 slash to dues which is the address that we're trying to go to here and then the final thing we're going to do is we're going to say comma true because this takes in an async argument that is a boolean and we're trying to do this asynchronously so once we have that we now have our open the next thing we need to do and if I fullscreen this it might be easier to see is say HTTP dot onload is equal to a function that takes in an event and inside of this we're going to once again say let the container equal the document container so similar to what we have up here so this is document get element that get element by ID of the container and then we also need one for these response not responses because we only have one response this time for this we're going to say and parse event that dupes event that target we're going to say event that target that response so that gives us our response the final thing we have to do now is say container dot insert a jason h or HTML insert adjacent HTML and for this we'll do another after begin comma and then we'll throw in this exact same thing that we had up here with the square brackets so we'll use the same format obviously you wouldn't want to be reusing code this much in a real environment you would want to do something like oh I forgot to call that this should be response spelled correctly so now I should be able to say response dot ID plus the square bracket in a real environment you wouldn't want to be reusing code you want to follow you know DRI principles so don't repeat yourself and I apologize if you can hear what sounds like AC line in the background that is one of my dogs apparently very excited about a neighbor's dog so we'll say response to that task and then we'll throw in the BR tag again and then we'll close it off so now we have the container insert added here and the final thing we need to do now after we come out of this is say var form data is equal to new form data this is going to be document.getelementbyid e and for this one this is why we named if I come over to the index that's why we named the form R we gave the form an ID of to do form because we're actually going to be using that over here so we're grabbing the to do form and we're storing the form data and then we're going to do a X HTTP dot send and we're gonna send the form data and if we did all of that correctly in theory I should be able to come over here refresh the page and we have 15 here apparently I must have accidentally sent one so let me create a 16th to do so number 16 is create the form video and now if I hit submit it is appended to the first element here because I used after begin instead of before end but of course you can leave this as a after begin and you can set these to be after begin so now if I do this is a seventeenth it gets added appropriately and if you wanted to what you could even do is up here just say something like VAR element addition oops element addition position is equal to after begin and then you can just grab this element position whatever variable and replace both of these so now if we refresh the page we can say like number eighteen gets added to the eighteenth and then let's change this to a before begin refresh the page now it's the opposite so number nineteen should should be at the end and there you go so it's just a quick way to configure this in a bit of a cleaner way you could also do something similar with your responses here you know you could refactor this out and say something like a function that takes in your response and it grabs these things so let's maybe try to do that real quick let me fullscreen this again so let's come down here and let's create a function called no we'll say a function for to create response and this will take in a response and in here will return a string of square bracket plus the response that ID plus square bracket colon oops colon space quote plus response to task plus a br tag so if we did that correctly we should now be able to come in here and say for this one create response response oops don't need that semicolon there and we should also be able to come up here and do something similar and if we refresh the page everything's broken oops create response this should be responses I and now everything seems to be working again so let's just zoom in real quick and let's try to create a final twentieth element and there you go to edit appropriately and now we are using a bit more of a dry approach to this which is of course always something that you want to see but I think that's going to do it for this shorter episode I hope this helps and I will see you guys in the outro okay so that's gonna do it for part two of this week's twenty and twenty challenge hopefully part three will just be some quick styling changes as we do a little bit of cleanup for making this application a little bit more presentable you know it's a bit of a shorter project this week but hopefully this is good prep work for using different frameworks like react or view in the future to create some more interesting applications and hopefully teaches you guys a little bit about using api's from like a rails perspective as well as it from the consumer perspective because it's always important to remember that just because you created something doesn't mean that it's necessarily useable from the users perspective I feel like using a project like this gives you both the perspectives from the producer in the consumer point of view so if this video was helpful remember to like it and you know subscribe for more and that pretty much does it for me I will see you guys in part 3 thank you for watching [Music]

Channel: Deanin

Views: 1,476

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

Id: UWuEOFMA9T0

Length: 17min 43sec (1063 seconds)

Published: Sat Apr 11 2020