Build a Rails API w a Modular JS Frontend - Part 1

excellent perfect I know a lot of study groups start at this time so this particular group is for the JavaScript setting up our rails API and connect it with a modular JavaScript front-end so we're gonna be building out an application that has a separate Rails API and a separate JavaScript front-end which is going to render all of our Yuka it's kind of similar to how things are going to be set up when you start building out your final project so it's kind of like that in-between between the rails and jQuery project review as well as the final projects that's kind of centered in between there and I'm starting from scratch so for those of you that want to follow along while I code feel free to do so and I'll go slow to where you can code along so for those of you that haven't met me yet my name is Suren Bernardo one of the section leads that I that covers the JavaScript section of the curriculum and I also do the final project review so when you submit your final project at the end of the program I'll be the one that reviews that project with you and then at that point you will complete the program in graduate so cool any questions before we dive in to this application you and feel free if you have any in between pop them into the chat unmute yourself either way works cool so I'm going to share my screen okay everyone see my screen okay I'm gonna hide all the floating head so if you DS need something pop it into the chat or unmute yourself excellent cool so I'm going to start here let me increase the size of my text editor a little bit excellent I'm gonna make a drink we're gonna build a simple notes application I'm gonna make a directory called notes change into that directory and then here in my notes directory I'm gonna create a new rails application does anyone know how a I start a new rails application yeah rails new of application exactly so derails new we'll call it notes API and I'm gonna give it the API flag because I don't want it to include all the abuse stuff that comes normally with Rails so that's why I'm going to add in the dash dash API but I'm also gonna add in the database equals post grass QL because I'm gonna want Postgres for my database rather than sequel like three cuz maybe down the line I'll want to deploy this to Roku Roku only works with Postgres databases and doesn't work with us so these are the two different flags I'm going to add when starting my new rails application - - API - - database equals post rest month so let's get that started I'll create all my directory file structures from my rails app and all the various dependencies excellent so let's go ahead and open up looking a CD into that particular program now we got my rails application it's got the normal directory structure I'm gonna want to go to my gem file and immediately because this is going to be a separate API and we're going to be making requests from a different origin we're going to need to uncomment this rack cores gem run bundle to install that particular dependency and then in my config file there is in my initializers directory there's a course dot RB I'm going to go ahead and uncomment that entire block and then in my origins I'm gonna allow all origins or this rails application normally if I knew that my front-end origin was you know localhost three thousand or three thousand one then I would say localhost you know three thousand I'm gonna say I'm gonna call fortunes or that and then for resources I'm going to have all resources and approve any any headers and any methods get post put batch and all that so anybody is allowed to make requests to this particular server cool so now that that's set up I can start building out my particular models for this application actually let's start with the controller's so I'm going to create a new controller the controller and I'm going to call it notes that'll create controller under my controllers directory called notes controller and I'm gonna actually want to namespace this it's at API v1 so it's going to be API v1 notes controller which means that I'm going to need to add those directories and be one and I'm gonna move this in here and I'll move it cool so now my notes controller is under API b1 as well as I'm naming that particular notes controller 81 because down the line let's say I create version 2 of my API you know I'm gonna want to name names space that API v2 and put that in a separate directory so that I'm not needing to modify my b1 API cool and let's go ahead and build out the different crud actions so for those of you that are familiar with rails what's my action to to get the list of notes exactly so we're going to create an index action and the convention for that is to create an instance variable of notes and make that equal to a call to a database called notall and normally you would leave it at that but because this is an API we're gonna need to render jason or this request so in order to do that we're gonna explicitly say render jason and for that jason we're gonna render the notes and i always like to add a status to that particular hash 12200 so anytime someone makes a request to my index or the notes index i'm going to give them adjacent representation of the notes don't have any questions regarding that or what i've done so far for those of you that are in rails this is fairly familiar now ideally we'd want to use a gem like activemodel serializers but for now because we're not having any special associations I'm just gonna just use the standard Jason rendering what's the purpose of doing the API version 1 setup yeah excellent question it's it's so that when you're making a request from another origin you know that you this particular application is an API only type application so that it's only sending data this rails application is only sending data and not rendering any types of views so this is a convention that you'll see normally when you know companies build out API so they normally namespace it with API and then maybe the version of that API excellent question ok cool any other questions let's build out our show you'll see the at note equals note doc find and that's params ID and then we'll do the same thing here we're gonna render Jason of that individual note status 200 and then let's do a create and note equals note or just denote create and we're gonna go on a wait list our params let's create the private method called note brands and they're gonna require no and we're gonna permit and we actually don't know what attributes are note are gonna have just yet but let's just say it's gonna be simple and which note will have a excellent then we'll also up again we're going to want to render no render Jason oh what am I missing update then we'll do the same thing now dot you're gonna want to find that out and then we're gonna say no dot update pass in the new friends and then render it back cool then again I'm not following a lot of conventions normally I'd want to say if node update then render Jason else render an error so but just for the sake of time you know I'm not following those particular conventions but normally here I would do no no dot no new you know and then saying if add note save then render Jason but again well just for the sake of time we're not going to follow those particular conditions awesome what am I missing missing a destroy yeah then I think we've got all the crud destroy and this time I only want a lender for the destroy the the ID of the note so for that it's gonna be rendered Jason no ID and then it's at no time I don't care about sending the entire note back to my server I just want the ID of the note that got deleted excellent cool one thing we haven't done yet though is in our routes dot RB so let's go to my routes we need to define our particularly routes so we're gonna namespace API namespace one and then we're going to say resources [Music] excellent so let's run rails routes just to make sure excellent so we have a get request to API v1 notes which goes to the API v1 notes controller index action and then so on and so forth for the rest of our notes it looks like everything looks good from there now we need to create our model create our model for notes that will create for us a migration file under our DB directory here we're going to create a table of notes and then we'll say T dot string Y that's all the rails DB migrate and that will do that I think we need to create the database yeah trails DB create we're using Postgres then we can migrate excellent now again that updates our schema so now we have a notes table with a body and okay um I want to add some seed Folsom - my seeds that are be and then just create pass in an array body and then the text so I'm here as BBC see my database excellent let's check the mass console will city note the hall excellent like one all that size excellent let's fire up your server then let's visits local thousand that's just our normal rails but now food rivet API v1 slash notes we get the Jason representation of our notes any questions so far with what we've done types into the chat Oh excellent so now that we we've got our rails server essentially up and running what we can do start building out the front end of this application so I'm going to go back to my terminal I'm going to open the new tab keep my rails server running I'm going to move up one to my parent directory and I'm going to create a new directory will just say Jas run it seeping into that excellent so a couple of things I'm going to want to build out in this particular directory so a couple of directories I'm going to want to create ok let's open up the code editor from that first and I'm going to minimize the rails one excellent so I'm gonna make a bin directory I'm going to make a source directory and then I'm going to make a Styles very cool and then I'm going to create an index dot HTML these built separately yes interesting exactly so I'm building two separate repos or two separate applications one of them is just the rails API which is separate and then this one is the gonna be our from it and I'm gonna use my friend and to talk to my rails API to get data and present that to the page cool yeah cool all right so let's start index dot HTML file there we go excellent and just leave notes for the title couple of things I'm going to add to this particulars body I want a container class container and I'm gonna want a form to add a new note so when you say form just make it simple for now input text excellent that looks good it's very pretty um let's see what else um buddy I'm gonna need a notes container painter this will house the current notes good so we have a form to create a new note and then we have a did to hold the perennials need anything else actually I have styles so style style dot CSS [Music] you excellent perfect you can link our styles of issues with travelers our family a few more questions from a stylesheet perfect all right cool so we have a text form we have nothing no ability to submit anything just yet at least we've got that liar any questions so far you let's play a little bit just in case they're in the track so now looks good excellent so now I want to start building up my je s and the purpose of my je s is gonna be to make requests to my back-end to get the current list of notes so that'll be the I the goal is to get the current notes populated inside my notes container so inside my source directory here let's CD into that I'm going to create an index base file well this will kind of be you know my my main or my kickoff on file its gonna kick off the rest of my application I'm also going to create a couple of other directories or an is called adapters and the many Windows File components again we want this app to be modular and filled out certain modules and / components for this application so that'll all be in under my source directory and that'll that'll be what I need inside the source so I'm gonna create a new variable called app and inside my index J s and what I'm gonna do and for those of you that haven't gone over object-oriented JavaScript yet this may look forward to you but for those that have nearly we're gonna create a new instance of app we haven't defined app yet but app is going to be an object or a class that we are going to create a new instance of cool then we'll go to our adaptors and we'll create what's called a notes adapter another name for adapters could be service the service or the adapters they're going to be what's going to talk to our back-end API so that's the the purpose of a particular adapter so in order to do that I'm going to need to define my notes adapter class and then every class normally has a constructor and then inside the constructor we can define various variables certain properties and variables for this particular adapter so we're gonna set a base and larell and we're gonna make that equal to be equal in the local host 3000 slash API slash this is gonna be our base I mean I guess we could check on notes who doesn't have any other names URLs excellent so we're gonna create a method on our adapter called get notes and what this is going to do it's going to make a vegetable quest to our base URL then once we get back that request or that response we're gonna parse the JSON from response so this is my get notes we'll start with that Oh excellent so there's my adapter any questions regarding that this is just an object with a constructor so whenever we instantiate that adapter it's going to set a base URL then we'll have the ability to call get notes which will make a fetch request to our base URL then we parse the JSON so at some point we're going to say adapter equals new node adapter and then we can think of this method is kind of like an instance method so any new instance of notes adapter has the ability to call this method so at some point we're going to say an adapter get notes and that'll get our particular notes from the database and return it so we want to say that in their able and then do some stuff with that that's essentially what we typically with the adapter will it pause for a little bit oh thank you finish cool any other questions notes so let's move back up one or here let's move into our service components let's create an app now jeaious file you want to separate component which will be apparent when our components directory I've created three separate files fjs note jeaious and notes plural is in fjs I'm going to create a new class called app and the only thing that this is going to do when we create it or when we create a new version is instantiate a new instance of my notes my notes class which I haven't defined yet let's simply all my app class is going to do so again if we go back to our index J s all I did was create a new instance of app and then this is that app that we're creating a new instance of and then when I create a new instance of app that'll kick off the constructor which will create a new instance of my notes application or my notes class so we'll define that we'll take this is where the meat of our program is going to lie this notes on class so I'm going to want to do a number of things inside this particular class then I want to set a property of notes and make that equal to an empty right I'm going to want to create a new adapter notes adapter at some point I'm gonna want to find listeners on soil let's say find event listeners I'm going to call the method invoke a method called buying event listeners we're going to what goes on for that particular method cool excellent so now let's see what am I gonna want to work on what I want to fetch and load the notes so actually we'll do that in the constructor and we'll call a method fetch and load those that will invoke that method the veteran load notes is going to use our adapter so this the adapter which is equal to our new instance of adapter which means we can get the notes so we're thinking we're making use of that particular instance method well get notes write that returns a promise where we get back our notes and the pass into callback function it's console.log notes make sure that everything is still working as intended so if we go through the flow again once we load the document the index J s is getting kicked off it's creating a new instance of app app once it gets created it creates a new instance of our notes component and when our notes component is created it sets various variables and calls a couple of methods we don't have behind event listeners yet so I'm gonna comb it that bit out but we do have fetch and love notes which makes a call to our back-end API when we call some log of the notes here so that looks good so far we do need to load our JavaScript into your HTML we do that here and just before our quotas in bouncer some script source equals to source yes this they say adapters notes about your source components after yes no its components come on let's go back here so make sure we have no errors that's a good sign however don't see us making requests but what I mean this in humor it's a new app so so [Music] you do you have to restart the server for that work server or not my jazz should be loading right [Music] Minges console.log yeah I think it's not learning there Janice no I've put my script tags at the bottom of my index dot HTML just before the closing body which is essentially the document you know already style so I know that my DOM is loaded before my scripts I don't think we need [Music] pretty sure we can sell clothes there we go okay I guess we can't some flow that's very odd is not defined wonder if we're gonna need to fudge around okay there we go awesome so yeah we just needed clothes even script tags and then we needed to order our J s according in order for a PS to be able to instantiate a new app the jus need for for app needed to be loaded first so that's why I needed to load this before I couldn't open it yes so now we see in our notes adapter or in our notes component when I make a request to get notes if we go back to our notes adapter get notes makes the fetch request to our localhost URL or a base URL then it parses up the jason and then it returns that result to our notes class right here then we handle that with another then when we get the notes that we want in the console log that notes any questions are any questions around promises and how they work is it notes adapter only used for connecting it to the API yes okay so that's that's the sole purpose of the notes adapter again this could have been called notes service that's another popular convention yeah we're just gonna call it notes adapter that's it's only job is to communicate with the API so this is kind of like the middleman the controller if you will where it talks that API then hands that information to to our front end how is this related to in one of the in like the refactoring lab it's the folder was called services is that a different thing so either we factoring lab I'm trying to remember which one that it's called um called Rails refactoring api's and basically it introduces a services folder Oh yeah and that's on the rail side yeah that's a little different that's you know right on the rail side you can have these services that communicate with I mean I guess that's kind of the same because this adapt this is communicating with a third party API it just so happens to be a third party API that we built right whereas a service that you build in a rails application may communicate with a third party API that's somebody else built right like a github or a Yelp or you know you would use a service that makes sense I was thinking of it in terms of like putting all the code that's similar but that's not really the point okay back same question cool cool so we got that built out that looks good now we want to take this array of objects and get them appended to the Dom and presenting to the actual user because we're getting that data from our server now so we just want to show that here to be used so we're in order to do that we're gonna need to build out a couple of additional methods in our notes class so let's see more notes class excellent so anything the best when you approach this who so yeah trying to think of the best way to approach this will probably need a render method of some sort what to render stuff to the dog and in terms of where we call that I think where we want to call that is after we get all the notes yeah so somewhere around here we're gonna want to call render we're going to return from this particular promise when we returned another furnace which we can handle and then call this stop render cool and let's just see what happens I'm gonna console.log notes again and then I'm going to return from there that'll hit this then which we'll call this dog vendor my clothes rendering so then inside render what we can do is grab the div which we called notes container because that's where we want to render our notes that's here we can say lowest notes container equals document elements D I'm gonna use vanilla JavaScript rather than jQuery notes container and then let's just say no it's container inner HTML just let me get the white coated something just something see it cool we got our render function working just fine any questions that I get so far you excellent actually what one thing we're gonna need to do as well we have this empty array of this notes when we get our notes we're going to want to iterate over each one of those and push that note into this that notes so that as we iterate over that array of objects we're going to push each individual object into this knot notes up here so then in our other methods we have access to the array of notes by just calling this not notes so just to demonstrate that so again what I've done is after I got my notes from the server I ate it over them push them onto this notes so that when I call this not render down here I can say there we go my notes are so we have access to those notes in all of our different methods because we've added them to NIST documents cool so that looks good so long [Music] let's say you learn don't turn well I'm going to call it for now I think next Wednesday I'll do a follow-up I won't touch any of this code that I've built and I'll continue from where I left off next Wednesday and I'll record that as well and I'll label that is part two so that way you can watch these videos in sequential order where do you post the recordings of the yeah excellent question so post them lean it's also pinned at the top of the online web dev channel but I know there are quite a few things been there to get lost so if you go there you know it says staff home but it'll redirect you to your particular accessible link and then there's a there'll be a link there to access all of the videos there are two other videos you can search individually they organize a section so how am I not known about this for like a year that's an excellent question I think we need to do a better job of informing you guys I apologize maybe less than less than a year but still way too long yeah Wow okay yeah there are quite a few quite a few videos there but yeah I'll post this as soon as this compiles I'll post it up to this this video lectures - and if for whatever reason you can't make it next week again I'll record that and then I'll label it part - awesome dennee I want to leave the last couple minutes for questions before I leave you to your Wednesday evening so any questions in general I know I went over a lot that some of this you may have been following some maybe a little foreign which is not a problem the important thing is to gain context and eventually this all start to make sense so any questions before I leave you to your Wednesday's awesome right guys well have a good rest of the evening and I will hope to see you all next week okay guys thank you

Channel: Cernan Bernardo

Views: 3,956

Keywords:

Id: seCqoRBCq9U

Length: 46min 16sec (2776 seconds)

Published: Wed May 02 2018