Fullstack Node iOS - Intro to SailsMVC REST API and Routes (Ep 1)

hey what's going on everybody in this brand-new video series we are going to finally finally talk about how to create our own custom back-end solution to support a browser front-end as well as an iOS application on the mobile side the main piece of technology that we'll be using to create all this is nodejs and before I get into any type of code I would like to now demo what our application does and slowly talk about what features we're going to support okay so hopefully you are excited about this let me switch over to my desktop right now on the lens side of the screen and we have the Chrome browser on the login page right now and also for the iOS app in the middle we have the same login screen in addition to logging in we can also create eight users that sign up here and let's say you go to register you'll see the same page and I'm going to log in using the browser side let's say you what's an interesting character for us let's say the president and president dent at gmail.com one two three one two three four our secret password submit and now we are logged in as the president so pretty basic stuff and this application is called my journal and you're basically supposed to just create a lot of different posts for your journal you can treat it as some kind of diary I know a lot of us still keep our personal Diaries around I know I do at least on the right side you can log in as this brand new user now so let me go back to the login and the username is the president and one two three one two three login and both right now let's say that I currently don't have any posts right so why don't we go ahead and create one using let's see let's use the browser site and create post now for a particular post you have the title the body of this post here and then also some kind of image URL so why don't I estate title is making history as Donald Trump and visiting North Korea as the first president so he's making history and for the image URL we can search or maybe steal an image on the intern so let's say Trump and North Korea I think I should be able to pull out some kind of image here so what's going on let's take this one right here might be good and let's right-click that copy image address and I'm going to paste that in here so submit this and basically when I hit that submit button it is going to hit the server at localhost 13:38 and it's going to save this post inside of the database now this means a couple of things really because we have a REST API is supported through our custom back-end solution I am going to show you what the arrest API looks like right now so I'm going to open it new tab paste that in and just a pose like that and hopefully it's just show up so let me just remove that backslash and here is our post REST API so what I can also do is I'm going to create another post a b c and d EF hit the submit and now we have a second post object you'll see that the rest api if i had refreshed we had now have two different post objects okay so that is looking pretty fantastic I'm going to now refresh my iOS site by just dragging down and you'll see that because the iOS application is consuming the rest API data right here it's going to pretty much reflect the exact same list of posts that we have inside of the browser so ABC ABC and also the Trump post all the way at the very bottom ok everything is looking pretty good in terms of creating a post object right but whenever you have some kind of REST API you should also support a couple of different features the other feature is to delete your post objects so let's say I don't want to see this ABC post around anymore I can hit the delete here and delete it's going to remove from the database and because it's now removed if i refresh here this post object will now be gone alright so that's looking pretty nice now the other REST API functionality is maybe you want to edit this post object and perhaps I don't like this title of making history so I'm going to open it inside of the iOS app and let's say making history as Donald Trump and why don't we just change this to creating history right I'm gonna hit the Save button right here and you see it's now being saved as creating history and this will now change as creating history as well so i refresh that and so now the title is changed correctly okay so that's pretty much the application in a nutshell you can also create post objects inside of the iOS application so a and let's say BBB if they create that those will be on the very top of the list now and if you refresh this view right here you'll see the exact same thing this application supports a lot of different users if you have another user created which I did at the very beginning of today's video what you can do is log in as different users and you'll see different post objects just like so I'm gonna just do this on the right side as well so click on that and you see the exact same thing again because everything is looking at the same database namely in localhost 1338 alright so that was obviously a very very quick demo of our application here and you probably have a ton of different questions that you want to ask instead of answering your questions one at a time because that's gonna take forever why don't I slowly walk you through the process of creating this entire application and hopefully along the way your questions will be answered so the first thing we need to do is to get started with installing something called sales MVC that will help us create the foundation of our node.js back-end so why don't we get started right now and so before we begin today's coding session I just wanted to let everybody know now we have a brand new course now available on the website and this course is called a full stack social we have no J's for the back end we have iOS swift for the mobile application right here and on the left side we have HTML and JavaScript for the browser front and licen now and give you a very quick demo of the application I have a user already registered so I'm going to log in as hiker and submit right here you see that whenever I log into the application we have their friends section on the Left I'm currently not following anyone and I have previously created some posts and that's why we have a feed and that looks like this so it looks pretty solid right now let me go ahead and log in to the exact same user for the iOS application right here so log in is going to load pretty much the same looking UI we have the hiker and then we have the entire feed inside of this or vertical list right there okay so pretty awesome so far and let's say I want to actually follow some friends and fill out this list on the left side I'm going to hit the search right here and let's say I want to follow the current user and I'm going to go back home you'll see that I now have my feed populated with the posts related to the courier right here so a couple of posts and down below I'm back to my hiker post if i refresh this right side you'll see that I have I post objects on the bottom as well as your friends on the top right so if I wanted to follow more users I can click on that click on the garden or click on the doggie lever and drag this down refresh my list right here you'll see some additional posts show up just like that alright so that's just a very quick demo of the application if you want to check out more details about it make sure to use the link in the description below and let's go and get started with the coding session right now alright see everybody welcome back to the coding session for today's lesson hopefully you're ready to get your hands a little bit dirty with some code in today's lesson what you're seeing on the left side of the screen here is a brief outline as to how exactly I want to teach you to build out this entire application there are lots of moving parts so this is going to take a couple of different lessons here and hopefully you're not too intimidated by all of these steps first thing we want to take care of in today's video is a brief intro to what exactly is sales and bees and now we're going to be using sales NBC to generate an empty node.js application it's pretty easy I'll show you how to do that step-by-step and once we have that done I'll show you how to install some tools to help us improve the development lifecycle so you know things like not having to restart our application every time and then once we get everything up and running we are going to create some routes and some endpoints to load some REST API data and if we get around to creating some crud endpoints we'll do that as well we'll see what we accomplished in today's video as we move along here okay now that you know what the actual steps are for today's video let's move this guy into the corner here and first thing we'll have to talk about is what the hell is a sales MVC well let me go over here launch a chrome tab I hope you guys are aware of how chrome search works basically sales jazz com sales dolts 1.0 has arrived now check out the upgrade guide here and get started and down here they give you a pretty quick description as to you know what the heck is sales and what is able to do it's a really nice framework I find especially for newcomers that haven't exactly built out a complex back-end solution before it's a hundred percent JavaScript it supports any type of database using some kind of arm auto-generated REST API and so on so forth so make sure to and give it a look and you should be alright so let's go ahead and get started with our application down here it says we are ready to set sail I really like the the icons and the documentation page that's kind of what drew me to the sails NBC down here there's no node problem find my note installer so you can click on here and install node for your computer most of you guys probably have it already so I'm gonna go ahead and skip that step next thing you want to do here is to install sales so make sure to go over here and copy this entire command load up a brand-new a little tab here inside of your terminal hopefully you guys can see exactly what's on my desktop so what I'm going to do is I'm going to run that command there so NPM install sales - g for global you might run into this error as well so just type in the studio and then just type your password right here and install it as the administrator i think that's what this is called in unix and once you have it installed you should be good to go here so clear off of that and now what you want to do is you want to head into some kind of directory so let's go ahead and say sandbox those sales and sandbox right here well as you'll see that this directory right here is completely empty LS is just listening out the contents of your folder and okay so so far so good let me move this to the corner right here and hopefully things are still looking alright and next thing I want to do is I'm gonna say sales generate and new application let's call this the my underscore Journal underscore LBT a and just hit enter right here now next thing you are presented with is a couple of different options down here you can create a web app which is an extensible project with auth login and password recovery all built in out-of-the-box already I find that this project comes with way too many files and it's pretty overwhelming if you don't know what's going on so instead of being overwhelmed and scared by the web app let's go ahead and create the simple empty project and then let's see installing dependencies and if these sales app fuels to configure and just wait for this guy to finish here and we should be you're ready to go here so LS we have my journal L BTN and the next thing I wanna do is I'm gonna open this project inside of Xcode or not Xcode by visual studio Kade so vigilance video could open this guy open up a new window right here opens I'm gonna folder make sure to go inside of the let's build an app sandbox open up this guy open it and somewhere inside of your computer you should have that folder and let me just drag this so that you can see what exactly is inside of this window here okay so are things looking okay and it looks good if you go inside of this project directory you'll see a ton of you know directories that are kind of empty so API controllers you can also see this if you go inside of here and open dot this is a kind of open up to finder and you see all of these folders right here so obviously there are a ton of different things that you have to be aware of for this entire application to work correctly but the good thing about sales NVC is that everything is hooked up already so you're kind of good to go I'm going to go back into my project and show you the first thing we want to take care of here which is to of launch applications so that it actually works right so the main application is loaded inside of this app.js file there's a lot going on here but you don't have to care about it too much now the only thing you have to execute is inside of the terminals I'm going to use the terminal for visual studio code because it's easier to record I have this terminal launch right here you might have to install it using this terminal plug-in but once you have that installed you can just say let's see was it nude app dot J as and once you have that being run you can see that your application is loaded on port 1 3 3 7 by default and some of you guys might be asking well what the heck does that mean well you can go inside of a browser now say localhost 1 2 3 3 7 and you are shown the brand new application that has been just created with these sales generate command and you can read what it says right here and get your bearings lit for an app and dive in so things are looking pretty solid and we have our application now created so what else do we want to take care of before we get going here well we can either install some tools or talk about some routes here and so let me first talk about the route and then show you why we install these little tools to improve development and let's see the first thing I kind of want to do here is to make sure I can support some kind of route and what do I mean by our route well let's say I want to support and you're out of pose like this and instead of using returning a 404 I want to show some kind of JSON result so for example inside of this Firefox browser I am inside of this particular URL here zoom pose and I want to load some kind of JSON data right here right so this is what it looks like in the Firefox browser and so how do I do that inside of this project currently well it's actually pretty easy and let me just close out of the outline here instead of sales at me see they have this config portion instead of config there is a routes dot J's file currently there only exists one route which loads the home page that's why you see this right here this is the home page at the root route like so now I'm going to go ahead and add a second round I guess is what it's called and this guy will be called the post and round and hit the colon like that this guy I am going to use a quote and once a post controller and let's say pose like so now this post controller is a file that you have to create inside of the controllers director here and then inside of that file I'm going to create a post endpoint I guess I'll call it so you can say new fountain and make sure to create this guy right here so let me just copy that new file visual studio code is really fast compared to you execute so that's kind of why I like it make sure to end it off in dot J yes now you might have to get a little bit you know used to JavaScript syntax but it's pretty simple just declare inside of your post controller a module dot exports and inside of this dictionary so this is kind of a dictionary object here you want to declare your endpoint of posts and just say : and this will be a function object right here that takes in a request and a response now the only thing that I'm going to do is on to say response that send and I'm going to send a string here we where we are hitting the post so post let's see the slash post endpoint is probably more accurate here okay so that looks good and I'm going to hit save and command option s to save all my files and once we do that we can go back down here hit ctrl C to end our application hit up for it no tab by yes and it's going to restart our app now hit refresh we still have our homepage and in addition to the homepage we have our post route hopefully working just like that so as you can see it's really easy to hook up a customer around by providing it inside of the your routes and Janet's file and then you have to kind of create your controller file with the post controller and make sure it's named correctly this post right here is just pointing towards this object in there you don't have to have these two strings match it can be whatever you want as long as this pose exists on this object here okay so that's how everything works and one thing that's really annoying about the default project is that every time you save your file right here let's say I modify this to one two three and something like that right I want to save and I want to refresh here I want to see this change immediately so it's really hard to just say you know ctrl C up and then watch for it and refresh this process is a little tedious right you don't exactly want to do this over and over again so the way to get around this is to install something called I'll see ya high for install global and a node of mine and this is going to install this global tool called a node Mun which watches the files inside of a project any time something has changed it's going to automatically refresh your code so just I don't know about like that it's going to launch your app J's files and let's say hey I'm gonna hit save it's going to restart the app down here refresh and a is here ivb be hit save and just wait and refreshed and now you don't have to restart your application which is a very very good thing okay now that we have the one tool installed there something else that is also very useful is this thing called Morgan so I'm not exactly sure why it's called Morgan but you want to install this thing called sales hook Morgan and just do this right here you know this should be fine so I'm going to copy that's a clipboard control C and NPM install sales hook and Morgan so you might want to save this dependency as well I think it's - test like that and once you save it and you should be good to go here so let's say node Mon one more time so what the heck does Morgan do for us right well Morgan allows us to just refresh this right here and you see it tells us exactly which endpoint we're hitting it says that we are hitting the post endpoint it's a 304 response because the response is actually cached and then we have how long it takes to actually return us that response at two milliseconds which is really really quick if you say one two three right here you can see that one two three is a four oh four and that pretty much means page not found okay those are the two things that we want to happen install so that we don't have to go crazy and you know developing our application here all right next thing we want to take care of is maybe we want to create a particular endpoint that will return us some and JSON data so kind of similar to what you saw earlier for the post endpoint and so in other words we are going to modify this code here so let me go back to the post right there and let's say I want to return some kind of post object saticons post 1 equals I'm gonna post object let's give this an ID of 1 and title and you know post title so title one and maybe some kind of body text as well and here is my body do with it what you once alright so that's a couple of properties for this post one object you can just send this right here save refresh and wait for it to refresh refresh and let's see ID one and these are all the properties that you specify right here pretty straightforward I don't think I need to explain too much in detail as to what's going on and now you can do the same thing with maybe a second post say I'm going to create one right here let's say make sure the indentation is correct and this guy let's modify this to be the ID of now let's say - and here is title - and let's say body body body alright so what I'm going to do now is I'm going to make sure to declare that as pose one supposed to one and post two and now instead of just returning this one single dictionary we now have the array format with ID 1 and 92 it's basically two posts objects okay as you can see JSON format is native to JavaScript so being able to return everything in JSON is just simply as returning these dictionary objects so this is kind of one of the reasons why I like JSON and nodejs as my back-end it makes things really easy and there are also a lot of other benefits to this framework as well so one other thing that we want to take care of is maybe we want to talk about something called a slug so slugs are nice and GC and what exactly is a here well let's say let's pretend that we have these objects saved in some kind of dummy database right how exactly can we fetch a particular post object by the idea let's say one or two well the way I'm going to do this is to introduce another concept called a slug and I'm going to declare it a second route or a second endpoint right here called fine by ID and the slug is going to the post ID like that now the other thing I'm going to do is for this route I'm going to make sure we are going to hit the post controller pose controller dot fine by ID now this is a new route that I have to introduce inside a post controller so to comment here and this new round just paste that and find my idea again everything is kind of a function that takes in a request and a result like so and now that I have this declared what I'm going to do is I'm going to grab the post ID from the slug so what exactly does that mean well I'm gonna say cons bus ID this object is equal to the request that program I'm going to grab the post ID slug right here and now what I'll do is I'm gonna say a response that sending me some kind of string and I'm going to show this inside the browser so let's say ABC I'm just saying that and I'm going to use find by ID here so let's say find by ID let's see what this does if I my ID does nothing until you specify the actual post ID so slash 1 and that should be okay I actually need to commend ctrl or command option and as to save the routes right here and now everything is saved correctly let me refresh this and now find my ID is sending back ABC like so instead of sending back ABC why don't we send him back the post idea that we specified I'll grab that and I paste that in here C wait further refresh and let's see refresh our here you see the one you see right here that's you and you see you know whatever you type in as the last slug idea so whatever that is you'll be printed out right here in the browser because we're sending back on the actual post ID as the response object okay and hopefully this is pretty straightforward so far I think javascript is really really nice because you can type out the code really quickly only I guess only if you know what you're doing okay last thing I want to do is let's say if we refine by ID we don't want to just return the idea let's say this guy right here what I'm going to do is I'm going to create some kind of W database so here is my dummy database and let me just paste that code in here and I'm going to declare in a Rams at all pose equals post one and posts two like that and maybe you want to introduce a third pose I don't know it's not really up to you and say all right here let's see yes call this post three just to make this a little bit more interesting post three and body three like that okay so now we have the repost objects inside of this array here and what I can do is I'm going to for the post endpoint I want to return all of the post objects like that so let's modify here and we can say save and for this we're going to stay back back back and here we go so refresh the deepest we got one two and three inside of the post array for the find by I and D what I'm going to do is whenever I am trying to find and buy the particular post ID right here I'm simply going to filter down this all posts array and I guess this is somewhat of a tricky algorithm if you're not used to writing algorithms yourself so let's see filtered Pez and with the filter of the all pose array and filter it down on some kind of function here so you can write these functions in JavaScript in a really really short syntax which might look a little bit confusing but I'm going to declare P as one of my post objects inside of the post array and then for each one of these guys I'm going to return PID equals equals let's see what do I want to do here the post ID like that so this is just a filter function it's very similar to I think Swift syntax so you should be aware of what's going on here so let me just hit enter here and last thing I'll do is I'm going to check the length filter post dot length if this is greater than 0 that means we actually found the pose so let's say your res that's Sen filtered pose and zero like that if this is not true then that means we haven't found the pose I believe this n failed so fail to fine fine post by ID let's see print out the post ID as well let's remove this last statement here and I think we should be okay so let's find my ID let's try to find by three is fine by ID of three and we get the ID three title three and body three we should have the similar responsive I find my ID of one gives us this particular object right here and let's see what happens if we try to find by something that doesn't exist right so ABC we don't have that ID instead of repose that means that we entered this case right here of line 30 a response and failed to find post by idea ABC alrighty everybody everything with our application is looking pretty good so far last couple of things I want to take care before I let you go is perhaps I'll declare a creation and point for our post objects as well to create declare this as a function and request and response just like so make sure to end this with a comma like that now before I fill out the definition here one thing that I might want to resolve about this little bit of code is you see how we're filtering the all post function right here you might be a little bit confused as to what this is doing another way to write down this bit of code is as a console turd those equals all posts and let me write this out in longhand format so it's filter and I believe it's function like this and P brace phrase return P equals equals now let's see pose I D like that I think it's actually PID like zoom so you can either write it in shorthand format like this or use the longhand which is this both are okay I don't really have a preference this looks a little bit easier to read actually in my opinion okay so with that out of the way let's fill out our creation endpoints right now so for example whenever I hit this creation endpoint I want to append on to the all passar a and what exactly do I mean well I want to say all Pez or a pen of some kind right so a pen in JavaScript is called push and don't ask me why that is but that's just the way the syntax is declared and what I'll do is I'm gonna say constant and you pose equals an object of ID let's say for title and new pose and let's say body and new body all right I know we all like new bodies a new post will now be pushed onto the opposite way just like so okay final thing we need to do is a make sure that we hook up our create endpoint inside of the routes page so the routes is right here and let's see let's declare this as the create and point it just like so and let's say : and this will be the post controller dot creates okay so now I'm gonna hit ctrl option as to make sure that everything is saved and the way I can tell that things are saved is that there's a circle dot it is not so everything looks pretty good right now let me refresh this right here you can see that we are trying to find the ABC by Aidid instead of using find by ID why don't we use the create instead so hit the create and now it's kind of spinning us being spinning now the reason why it is not ending the request is because inside of the create right here we need to say something like a res dot sin or just res dot and either one is okay and let me just end the request off like that hit the Refresh here and the request has now been ended with this extra line of code alright so not so bad and the thing that we need to check is whether or not the creation was actually successful and so what I'll do is I'm going to hit the post and point to list out all my post objects inside of this right so let's see what that looks like right now suppose and you can see we have our fourth pose object right here if I hit the create endpoint yet again we are going to go back and hit the pose refresh you'll see that we have the exact same pose being created inside of our poster array like so now one thing that you do have to be very very cognizant about here is that every time you save your application and it restarts you once it hit this post and put it again and you'll see that you'll only have your post ID one two and three because the entire application gets restarted and this kid right here it gets executed again to create your all post array so make sure you are aware of that fact there last thing we might want to do is for the creation process right we don't want to have this hard-coded title and body did it like this and instead and maybe you want to create it using some URL parameters here so let's say the title is declared as you know some title and you can say and body equals some body so if you're trying to hit the URL down here you'll see that we're hitting create title and some body and instead of using this dummy data here I'm going to grab it from the URL using Const and say title equals request per am and we'll use a title like that so very similar to this slug concept so buddy equals a request dot per am and let's say body like that alright now we can use the body here and let's say body and this will be its title or title and body rather okay so now I'm gonna hit save now and instead of running this why don't we say console.log and title and plus space space and plus body and like that and now I'm going to refresh this right here you'll see that we have some title and some body and if I go back and list out the post and refresh you'll see that we have ID for a title of some title and the body says the actual parameter that we pass into the actual you are so that's how you make your create endpoint work and this guy really should be a post request instead but I think I'll get to that in the next video and the last thing I want to say about this console.log is that for the sales MVC framework there's actually a different way of logging things so when you're logging something like this it just says it in this pure text like that instead of using this you might want to use snails don't log that debug Sam use debug and use the exact same thing here so let me show you what the difference is paste that in here and save let me now hit the create API again so create and hit that so hit that you see that at the very beginning here we have the debug and then it says the title and body you can I believe use a warrant as well so warning gives a different type of message so like that you see the warn is yellow the reason why you do this is because I guess first of all the actual warning statement right here is in yellow makes it a little bit easier to visually parse out when you're just looking at the log like that the other reason why you might want to do this is because when you launch our application into a production environment you might want to just disable all the debug statements and you might only want to see the warning statements so this guy right here allows you to toggle your debug statements very very easily all right everybody that's gonna wrap it up for today's video and hopefully you enjoyed it video is getting a little bit long here so I'm just going to end it with a couple of closing comments so in this lesson as you can see we were very easily able to create a blank empty Noches application using the sales MVC framework and you also saw how easy it is to set up some routes to return some JSON data inside of their browser now one thing that I do have to say is that all of the routes that we just wrote out it's really just dealing with dummy data that isn't all that interesting right so in the next lesson we'll learn about how to persist our data into your real database and then how to fetch delete and update this data with some other end points that we'll create inside of our controller file now if you're interested in learning about how to create a complete full stack social media application using sales MVC and make sure to check out the course using the link in the description below that's gonna be for today and hopefully I'll see you in the next lesson bye guys

Channel: Lets Build That App

Views: 35,914

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

Id: WRAAMMycrNM

Length: 36min 38sec (2198 seconds)

Published: Sun Jul 14 2019