Fullstack MyJournal - REST API Conventions and Data Persistence Waterline (Ep 2)

hey everybody before we begin today's episode I just wanted to let everyone know that we have a brand new course available on the website called full stack social inside of this course we create a custom back-end server using node.js and we also support the HTML front-end for the browser and also a mobile iOS application that looks kind of like this I'm gonna quickly demo what you can do inside of this application by logging in like so as I can we are presented with the UI that looks like this for all the posts that we have for this particular user right now in the iOS application we can pretty much do the exact same thing by logging in we are presented with all the posts objects just like so alright so that is a very quick demo if you want to check out more details about the course make sure to use the link in the description below with all that being said let's begin with our show right now why hello everybody welcome back to the channel I hope y'all having a fantastic morning in today's video which is going to be a lesson number 2 of the full stack of my journal series what I would like to do is to show you how we can transform our rounds here that we created in the last episode I want to transform these guys into more standardized REST API endpoints so let me show you exactly what I mean by taking you back into my editor right here so the first task to kind of take care of is to transform these guys into REST API endpoints that follow this convention so we have some get requests we have some post requests and also some delete requests like so and here is the actual pattern that we want to create so this might look a little bit confusing but it's actually pretty simple using the sales MVC framework and the second thing I would like to do is to show you how to persist some data using the water line form tools that this is object relational mapping and this is also pretty easy I don't exactly want to use our dummy database which is what we created and right over here in the last episode speaking of the last episode if you missed the first lesson make sure to check it out using the link in the description down below and once you watch that entire video make sure to come back here and watch lesson number two okay so with all of the intro out of the way let me move you this text editor move that to the right and let's see what we have for our application last episode we have our brand new empty application we have the node mod which creates our app runs it using the port 1 3 3 7 so this is actually a a word right here if you guys know exactly what this word is please leave it down in the comments below if you refresh the Chrome browser right now you can see we are hitting it with the get request of slash post right here and when listing out all these objects because our end point right here is setting back all of those post objects like so okay so pretty good stuff with our custom routes so far and the problem right now is every time let's say I want to hit the creation and put it right now right I'm going to have to hit it using what I define in this endpoint right here so for example I am going to hit what they create like this and I'm using the title let's say 1 2 3 and lovey-lovey 4 5 & 6 so hit the create right here it creates it using this guy down below and if I go back and refresh you'll see that I have my brand new post object with ID of number 4 okay that's how the creation works and this is actually not so good and that's so good because it doesn't follow the arrest API conventions instead of using slash create right what I'm going to do is introduce a brand new endpoint right now and the way you introduce a endpoint is actually define it using a get a pose or a delete there are a ton of different methods for HTTP these are just the three that I wants to use for today's video so whenever you create an object you actually want to use a post request and the pattern I'm going to use is slash pose like so and I'm actually going to use the creation endpoint that we already have created except : post controller and create I'm going to comment on this in tire line out and hit does save and now and because I don't have this create anymore if I go let's see create this should be a memory if I try to hit this it's going to present us with a 404 okay so make sure you are aware of this post request and now what I can do is I can try to hit the slash post instead of using the Chrome browser says slash host without the s you can see this also presents us with a 404 now the reason why we get at 404 is because the Chrome browser right here every time you send a request with a URL like this it's going to send a get request and we really need to send a post request instead so how do we send a post request is the question well the way you actually do this is to I either use the terminal and the curl command and that's kind of hard so instead I'm going to use a tool called postman which is right over here you want to download this using I guess Chrome right so let me show you how this is done I just searched for postman and you'll get to this URL right here hit the download somewhere inside of this guy and then once you download it you can launch the postman tool and you'll get to a screen that looks kind of like this every time the update postman I feel like that UI changes but it should look something like this all right so standard step right here on the left side you have the option to change the request to get post put patch to lead and so and so forth if you use a get request you can hit this right here so this is pretty much what the Chrome browser is doing right now now you can see we have a 404 right here it also says not found you can hit the pose with an S and you can see that you get all of your JSON objects back previously just like the Chrome browser so let's see what happens if we hit the post request like this and try to hit the actual post endpoint like that so hit a send and you see that we actually get a different response and we have the pose right here and we're hitting the slash post endpoint and we get a 200 and and for this warning right here we are printing out undefined and undefined so let's kind of see where exactly that is being printed out let's head back to the creation endpoint which is this guy we are printing out the title and body and because we don't have the title body it's saying undefined and define it like that why don't we go ahead and fix this by commenting all this 100 right now say the save refreshed and reload I'm going to hit this and you'll see that we are simply hitting the slash post endpoint using the post request right here and we're getting it 200 which looks pretty good and so what do I want to do here I think I'm going to close out of this little editor and shrink this down just a little bit here all right so for the create endpoint what I'll do is I want to access the title and body from this post request and whenever you have a post request you pretty much wants to pass the parameters such as title and body using this exdeath data form URL encoding the way this works is he wants to hit a kid so I'm going to use the title key and the value is going to be my lovely title and let's see for the other parameter which is going to be my body you know my post body here okay so these are these two objects that I want to pass using this post request you can now hit the send right here it's going to hit this same URL and to access my title and body down I'm going to use a syntax that looks a little bit different compared to this request parameter title it's very similar but just a little bit different so title equals requests and you want to access the body object of your entire request and access the title like that and for the actual post body so post body equals the request and body and this might be a little bit confusing but because we defined the actual post body to be this right here we actually have to say post body or actually body not body rather you might want to change this if you're confused just changes the post body like that and just copy that and use post body instead all right looks pretty good and now what I can do is I can console.log this so let's say console or maybe a sales dot log dot dip bug and let's say you know my title colon plus title like that and it's saved alright so all I'm expecting right now is to print out the title of my lovely title right here so send and we get the debug statement of my title is my lovely title we can't do the same thing for the post body say for this guy we are going to say body and this will be posted body like so make sure to type it out correctly obviously hit the save reload hit the send right here for the request and we have the post body is whatever we define over here right so my post body here if you just modify this via whatever hit this then you'll see the actual value from your postman tool on the right side okay so that's pretty much how you define a post request and using this convention of slash pose it follows the REST API conventions a lot nicer alright the last thing we need to fix is to actually create the post object inside of this dummy database so hey why don't I just remove these comments right here and just say that right here and I think I'm calling this body a post body now siliceous remove event and use post body instead now that's at the save and let's see our actual request is done I went it's 10:00 right here it's going to create that using the actual post object and I'm just going to you'll see hit the request of post I think I can do something like this right here and hit the send just like so and you can see now I have ID 1 2 3 & 4 using the values that I'm passing into the post request like so okay so this is pretty much how we modify the create endpoint to follow more REST API conventions the next thing you probably want to configure here is the fine BIID endpoint so previously we define it as the fine by ID right here and we don't exactly want to do this either's so let's follow the convention here using a get request so get and to say slash slash post and let's use the slug post indeed it be code right here and I'm going to use the same and pointer right here so why don't I just copy and paste this bad boy into the editor all right so I'm gonna have to say one more time and the way I'm going to access this endpoint is to use the get request and write it here so let me just change that use the actually let me use this one might be a little bit better I'm going to use the post endpoint hit that send right here it's going to say not found so let me try to say this and the way to actually fix this is the slash and one like so and you can see that by using the ID one I'm listing out the actual post objects right here so let's use the value of four this is the actual post that I created before but because I restarted it is no longer there it D 3 and IC title 3 and body 3 which is right here so it's high 2 or 3 and body 3 ok so that's how we modify our get request to fetch the post object and now that you kind of see how to customize your REST API endpoints to follow more conventional REST API is next thing I'd like to move on to is to discuss a little bit about data persistence using a water line and this is actually very very easy to do and the reason why we do this is because we obviously don't want to you know continue to use as dummy database right here right and this guy is going to be very problematic and it doesn't reflect what a true production application looks like so what we are going to do is to use water or the line and you know briefly go over what water line is now you can just search sales and water in line and this guy will take you to the water line right here and so by default sales apps uses water line as a norm tool you can click into this right here it'll load the documentation for models and worm and you should probably read exactly what the documentation tells you and it talks about how its database agnostic and you know you can use this for Postgres my sequel and reticent so and so forth don't exactly want to get into all the details of what water line is capable of doing right now so let me close out of that and take you back into it postmen and the way we are going to start introducing data persistence in our application it's a very simple the first thing I'll do is I want to maybe comment out the EE database that we have up here so the moment I do this and say the entire application is pretty much broken because we don't have access to this all post variable right here so let me show you how it's broken by modifying that hit the post and pointing right here you'll see that all posts is not defined okay so that's how we are going to start the way we are going to insert objects into the database is very simple I'm just going to go ahead and create an object first inside of my application so this might look a little scary because we have a ton of different files on the left side but basically we have the API directory which is where our post controller is located there is another folder right here called models I'm going to create a new file and call this post dot J yes like that now whatever you introduce models inside of your sales MVC application it's going to tell you to do a couple of things in terms of how the database is going to manage itself and migrate the data don't worry about this stuff too much but basically it tells you it looks like it doesn't have a migration policy configured in a production environment as sales always uses the migration of states to protect against inadvertent deletion of your data but during development you can choose these three options right here is I'm going to x' number one for altar so hit then hit one hit okay a problem with this is every time you hit a save it'll prompt you with this message again so it tells you that to configure this you just want to go and Sue X slash let's see config slash model J s so open this guy and let's go and see one of these scary files and down here if you scroll down a little bit it tells you that you can actually uncomment this out hit the save right now and every time you save it's not going to prompt you with that message anymore and don't worry about this stuff too much but just be very careful if you actually have some data migration policies not set correctly you can delete your entire database so do be mindful of that aspect of migration okay so with all that being said let me now go back to my models at post J as well I'm going to expose a file called post on J's and let's say module dot exports equals some kind of object and this object is going to have attributes so I'm basically defining what my post object is going to be it's going to have attributes and inside of these attributes I think I need a colon right here so colon and the attributes I wants to actually save for my post object is the title and also the body now for the title I can specify a couple of different properties of the title and so the first property is going to be the type this is going to be a string like so and I'm also going to require this title to be saved into my post object so I'm going to say require as true I'm going to specify pretty much these same attributes for my body say let's just say type and this is going to be a string as well and required so I think is required of true like that okay I'm going to save my project and now that I have this model object and define inside of this models folder I'm going back to my post controller right here and now what I can do is maybe I'll close on it this guy for some more space for the creation and point right here I'm going to comment out this code that inserts this new post into the all posts object I'm going to comment that out and instead of using this dummy database what you can do is you can say pose right here for the actual object that you define you can create it using the properties of title and let's say its title from above right here so this is right here at the title you actually want to wrap all this right here into curly braces and for the actual post body you define it as Bo dy but this is post body up here so I'm going to use post body like that okay so this guy is the key this is the key these are the values that's just how you define things instead of JavaScript and at the very end here you want to use dot execute exec and function and this guy I think it's just an empty function callback like this if you're used to Swift programming this is just a completion Handler and we are going to say consul and let's see log let's see finished creating as object like so and let's say return and res dot and just the you know and the request I'm going to comment this guy out because I don't want to end the request until I create my object right here this is asynchronous so you know this actually occurs a little bit later alright so I'm going to hit save and restart my project again I'm going to go back to the actual post request that creates my post object with these two keys title on post body hit the send right here and you see we are finished creating our post object like so now you don't know exactly if the post object was created I believe you can check the ear on this callback function right here so you can say if we have an air like so you can say a res it's a return res dot server err like so and I believe you can send the to string like that so I'm gonna saving in and trying to send this post request like so and it tells me that I finished creating my object which means that I probably didn't have an ear so to check whether or not your post objects are being created properly I'm going to go into this end point right here so hit the send right here it says that all post is not defined because of this error line 18 so instead of using all posts what I'm going to do is I'm going to use a post and fetch all of my objects by using fine like this so just plain ol fine paren paren and let's execute this little fine process with the function I believe it's the ear and also the result and so that's my callback function like so and what I'll do is I'm gonna comment that out if this is actually actually fetched properly I'm going to say a res dot sin and instead of setting all posts I'm going to send the result back okay so hit the save and restart right there and I'm going to send it for the actual request like a bad let's kind of see what's happening here's a res dot sin okay it doesn't exactly like this at res because it's being defined two times I'm going to define that as is and copy that and paste here hit save restart and send one more time and you'll see that I have to post objects being persisted inside of my database they are saying the same thing of my lovely title because I created the actual post twice so let's say right here is 4 4 4 or 5 out of 5 rather than and 6 6 6 6 hit the send go back to the post endpoint and hit the send again you'll see now I have 5 by 5 and 6 6 6 because I persisted a brand new post object inside this creation and pointer right here okay so I'm going to remove the right there and remove these comments as well everything with the application is looking pretty good you might want to check this here right here if the actual execution was not being performed correctly so for example if here then we are going to kind of copy and paste this guy right here so just copy and paste that with your return and you should be good to go so at the save and all this that shouldn't work without too much problem so that looks okay and that looks pretty fantastic right alright so that's pretty much how we create and fetch objects using a water line with sails and BC if you want more help with the syntax right here and also down here you are going to want to go back to Chrome and look up the water line sales and create and they have a ton of documentation right here as to how you actually write out the syntax right here you'll see that the way that they create these objects look a little bit different they have the await syntax right here so let me show you how this little bit of syntax is written out instead of using this exact function here so let me just go back and say here and the way they actually want you to write this out is instead of writing this which is a little bit long and hard to read you actually want to use the async oh wait pattern which is this use a weight like that and you want to say post dot fine like soon-coming seconds equals that and if they are ends that send post like so now this is pretty much the same thing as then so I'm going to comment that out hit the same and this should be okay you can try to hit Send right here but your actual application is not launched correctly down here there is a very very long air and tells you that the EO weight is only valid in async functions you might not know exactly what this is but basically in JavaScript there is an a sink weight promise pattern so for these functions right here if you ever use a no weight you have to make sure that this they sing like that and just hit the save and now your function is being compiled correctly and you can hit this end point again and slash post and hit this end and we should be good to go so we have the pose and we are now listing all of the post objects yet again so this is acid X that you probably don't want to write anymore just use this as you can clearly see this is a lot more succinct and easy to read in order to capture the hair that might occur during the fetch you want to say this R is a try take this put it inside of here and try right here and catch and let's see catch D here now so say a res server error like so and err not to string or whatever you want to print out for the actual air that goes inside of here so let me try to save and rerun this bad boy by hitting the send like so and we get exactly the same thing you can modify the actual creation process these the async/await style syntax or you can use this either way it's really up to you the last thing i think i want to cover before i end today's video is how we can delete these objects inside of our application now right so for example when we have the objects with ID of 3 2 & 1 let's say I want to delete object with ID of 3 well the way to do this is to define a route that actually deletes your objects so I hit a comma I'm going to define the delete or route as post like so and those controller I'm going to define a new route called deletes say let's say back to you post controller which is that and down at the very bottom right here why don't we say and then lead and this will also be a function that takes in a request and also a response down below why don't I just simply say response dot sin and trying to delete and let's say post now and try to save and what I want to see is this actually being printed out down below here okay so I'm going to go back to you over here let's create a new tab let's modify this to be a delete request and let's say I think I just want to copy oh this right here without the s and just paste that in here I should be okay at this end and now you should be seeing something down here so trying to delete the post now is actually being sent out okay so this is just sending all this to the actual that postman tool right you know so that looks pretty good and in order to delete a particular post with an idea one two and three I'm going to go back to my routes right here I'm going to use the slug pattern again like what we did for the get requests is slash slug of post ID now I can go back to the controller dot @j s and down here I'm going to grab the pose ID it goes request dot per am posting ID you know whatever you define as your slug it needs to be exactly like that and the last thing you need to do is to delete the actual post object from your post using arm so the way to do this is you say post and let's say dot destroy so destroy and you want to use the ID whatever you pass then as the post ID like that okay I'm going to use the await syntax so let's say async and why don't we say wait like that and now we should say res and finished the leading post like that so hit the save all this stuff looks pretty good and the last thing need to do is to make sure that we can delete some kind of post object so let's pass in the ID let's say three hit that send you can see that we have deleted our post object right here or at least we should have deleted it so what exactly is going on I have the delete request right here and is actually passing me back this object which isn't exactly what I want so let me go back to post right here and check if that was actually deleted that was okay the post was deleted like so and it looks kind of okay I don't exactly like how this object is being returned so what you actually need to do is you want to modify a configuration of your sales application I believe instead of blueprints ge'ez there is this little bit of configuration that automatically exposes your restful routes for your models I don't exactly want to do this and let me just say rest in this false and save my project again and let's go back to your post controller j/s so instead of seeing this let me try to delete the ID of two and send and now it says not found which is kind of what I would expect so let's kind of go back to the Arats right here I'm going to hit command option has to save all of this entire file I'm going to hit the send right here and it says finished Dylan post now and let's say I'm going to the refresh right here you see that I only have one more post I'm going to delete this post now with ID of 1 and I'm going to delete that hit the send and finish the lame pose refresh this one more 10 you can see all of my post objects are now completely deleted from the database if I want to create another one I can just go back to the post request right here and sa-11 1 and C 2 C 2 C 2 and this guy is a little bit hard to highlight but it's in sin and we created hit the refresh for the person get endpoint and we now have our those objects with just one object inside of the entire array all righty ladies and gentlemen that's gonna wrap it up for today's lesson if you want to look at more information on a REST API conventions you can do a quick google search here you'll find it the ten best practices for better REST API is and down here on this chart they give you a brief explanation as to what the get post put and delete request should actually do for your REST API make sure to give this a read if you don't understand anything that's in here make sure to leave a comment down below in the very next episode we are going to move on and consume all of our REST API data all of the data here and then put it inside of an iOS application right here we're also going to look at how to create a pose by sending a post request from our iOS application very similar to this page right here hopefully you're looking forward to then and I'll see you in the next lesson bye guys

Channel: Lets Build That App

Views: 11,042

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code

Id: ZPV1Yp2XKDI

Length: 29min 54sec (1794 seconds)

Published: Mon Jul 15 2019