Angular CRUD with Web API Tutorial Part #3 - Setup Local JSON Server and Mock API Endpoints

hi friends welcome to our tutorials we are continuing with our angular tutorial series this is part 3 of it where we are trying to build a product feature module for our e-commerce project today we will learn how to set up our endpoints and api and data trust me half the interest in learning dies because you don't have proper data to work with and when you don't have it you lose kind of interest you lose that passion so today we will learn how to set up those end points how to set up the data for you to continue building on your passion of learning welcome back my name is sridhar friends i am bringing over 10 years of experience as a full stack developer i'm here to share my knowledge with you on modern web technology stack i will share my knowledge on angular node express mongodb and other web frameworks i am here to share my knowledge at the same time i am here to learn from you so during the course of this tutorial series if you have any doubts just ask me in the comment section below i'll be happy to help you i can give you my personal assurance that i will try and help you in this entire series where you are trying to build your own angular crud functionality for product features this is part of the angular crud foothill tutorial series the playlist link is in the description box below if you have not followed the previous episodes please do so where we are trying to build a complete feature module for our e-commerce shopping cart application this is a part three of it in the the first episode we covered about the project introduction in the second part we we have set up our angular application today we will set up our mock data api endpoint so we can start seeing some real data when we work with our application let's get started so today but before we get into that let me tell you that we can set up the mock apis and end points using any framework any language in any server right so i am showing you using json server which is kind of a node based thing but you are free to use your creativity if you are coming from a full stack world if you have knowledge of dot net if you have knowledge of java spring micro services anything that you can use the idea here for us is to set up endpoints so that we can integrate in our application that being said let's get started with our json server so json server allows us to quickly set up a local server up and running we will have our server setup and listen to a default port which is 3000 we can customize our data contracts the way we need it and it's simple straightforward since its data contracts we define it in a flat file i know this is something that i have not covered in previous tutorials and srinivas and others have asked including rajan you have asked that how do we set it up the mock data you have set up in previous tutorials can you show us how to do it so here i am showing you the basics follow along let's do hands-on so that you do it with me all right so here we are last time we covered till 11 points today i'm continuing on uh today we are starting on tutorial number three which is to mock data setup so if you are following along just follow along it's simple steps i will keep it extremely easy and simple for you open a new terminal first right and since i told you we can use any framework any language any server setup for apis so you can also use cloud hosted uh apis and mock endpoints again that's up i'm leaving it up to you but here i'm going to show you let me put it this one two and three so you have some all right so what we will do is we are going to use json server that's a free package that's available which we can use and we will create our server all right so the first step is to install it right and to install it we will do uh npm install npm install hyphen hyphen save json server this is the command friends we have to run it okay so let's do that npm install hyphen hyphen save json server so once you have done it it will install that package for us remember i told you the default port that json server runs is 3000 right that being said you can run on any any port it's not mandatory that you should use 3000 you can run on any port on any server any machine vm etc i am showing you with 3000 but you can you are free to use your creativity or change the port number all right so that being said um now that we have our you see the package is installed you should see it in your package.json as well when you go uh let's see where is it uh json server okay let's just reload this one more time okay you should see it okay we will figure it out don't worry on that all right so once we have it here now what we need is create a new file now go into source you would see assets and environments right so it's a good practice to always store mock end points or data so right you can create a new folder right you can have a new folder called mock data or just data right or you can have it under assets i would prefer to keep it under assets the good practice also says keep all the assets under folder right so you can create a new folder inside assets call it data and we can store it here okay so not not file actually we should have a folder so i'll create a folder okay let's delete i don't know if i did a file or a folder so i'm creating one more time data okay so i created a folder now i'll keep all my files here so the best way to get started is what we will do is we will go and take up an existing product okay our first thing you should do is json server you can go and take it from this github repo all right so you can go and take it from this repo https github.com type code json server okay so once you have it you can always change it okay so now that we have seen that what we will do is go to this url and take the latest dummy code okay so for that it's pretty straight forward and simple what we will do just go to the log file and take dummy data here okay you will see here db.json so just copy this json structure for to get started this is the simplest way to get started so inside data i'll create a new file i'll call db.json and i'll paste the json file in it right now this is a dummy starter pack right so let's navigate to this to run our server first so what we will do here we will navigate to shop for less source and assets and data folder i have navigated it right so you can learn more and copy dummy json from here okay that is github link now navigate to the data folder and create a new file by the name db.json again you can give you can give name of in you can give any name actually give any name of the file you want i am for simplicity sake i'm just calling it db.json now the next thing we'll do is first we will run this so go to that navigate to that folder and run the command json server hyphen hyphen watch and then the file name which is db.json hit enter now it will give you this message that it is running on localhost 3000. let's go to that and confirm it so so once you see you should see this message which says you have successfully you're successfully running json server that means your server is up and running right so you should see json server running success fully okay this is a message you should see the next thing you should do is click on one of this post so you see the post then you click on comments you will see the comments output so these are the outputs that we expect from our endpoints right so these are the dummy endpoints so now i'm going to modify this instead of ports since we are building e-commerce i am going to call it product and let me format it quickly follow along so what i am doing here i am going to grab some attributes that we will work when we show it our products sorry all right so id then i will say product name then i will say category name or category id you can give any names that you want there is no since this is free json you can give any name you want right so here i'm giving category ids to product name is say let's buy something right so um so let's say i'm what what kind of shop do we want to build um let's say chinos right or you can build a clothes website you can be electronics website it's up to you like this is dummy data so you can configure any website that you plan to build so i what i will do is i will stick to say electronics right so we will say product is headphone headphone one right that's the name again you can give any name you want and then similarly we will say description give some description here description goes here okay and then you will again copy a couple of times because you you want more details right like say price and you will say 100 then you would say is available right so these are some of the uh you can add boolean right true or false and then you can say rating and we'll say it's four star rating right reviews so i can say that we are 120 reviews uh vendor name right so say seller one right and then we can also say is warranty so you get the idea right so warranty is two years right so you get the idea that we are here trying to simulate the outcome and the response from our end point so i will do it multiple times here give some name change right so change details here and simply so this is up to you the way you want to generate and you want to have your data output right so see now i have uh created products output okay so now error has been read error has been fixed okay so now let's go here and again go to our home page and you would see that there is nothing in post so refresh now you would see products the one that we just built so this is our output right now this is how we can generate any and every output in terms of endpoints right so what we can do here is we can add some more things like product image right etc so you can give image path right and so on and so forth so this is up to us i will leave this as an exercise for you to come up with more the more details here you have the more beautiful your application will be remember that so have some meaningful names have grab some meaningful names create a beautiful json which will have good data to work with i have shown you one sample example of how to create products similarly you can create others like comments reviews ratings vendors etc i will try and create some before we start the crud operation but it's up to you now i will leave it up as a homework all right so this is your homework as part of your homework come up with come up with beautiful data for your json contract right so and also come up with different different things that you want you don't want to have only one data right you can have everything like i'll show you like you can have reviews right so again you can have review structure here uh you can have product you can have inventory and so on and so forth all right so i will create some and share it to you before our when we start crud but for now just to recap these are the four steps that you have to do install json server create mock data run the json server and test your end points that being said that's all for today i will try and come up with the next episode maybe tomorrow morning but um the idea you get it the next episode is install bootstrap framework in our application practice this out follow along code along let me know if you have any doubts thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 19,553

Keywords: angular crud with web api, angular crud tutorial, angular crud operations, angular crud project, angular crud example, angular crud with json server, angular crud application tutorial, angular crud table, angular crud mysql, crud angular 9, crud angular 8, angular bootstrap crud example, angular bootstrap crud, angular setup mock api endpoints json server, json server angular, angular json server api visual studio, json server visual studio code setup, angular json server

Id: KZTu40cW4M0

Length: 14min 53sec (893 seconds)

Published: Tue Jul 28 2020