Make your own mock API (super simple)

hello internet so today i guess rather selfishly i'm going to show you how to make your own open source api and deploy it why because i want to make my own open source api i was looking for an api all about burgers i wanted faux burgers i wanted vegan burgers i wanted veggie and halal burgers like literally nothing i couldn't find anything on the internet that had a vague resemblance to this so i was like hey i'm gonna make my own and show you guys how to do it too so what do we want in this bugger api well i'm gonna debug a name i want an array of ingredients i want a short description sure that's quite like subjective but it's fine i also want the address of where i can find the burger or you know addresses if it's a chain so super excited about this let's do it if you did like this video or do you like this video please do like and subscribe to my channel it really would mean a lot as i would know to keep continuing making content for you guys so hit that button and let's do it burger api okay so i have decided to start off on my github repository page that's so you guys can find my burger api when i have finished so i'm just going to go ahead and click repositories and make a new one so i'm going to call this burger api description my burger api i'm going to make it public and just initialize that with the readme so now if you want to find this project you know where to go um great okay so that's where it is i'm actually just gonna grab this uh clone it open up my terminal now in the directory of my choice so i'm gonna go ahead and stick this in personal projects because that is where i keep miss my stuff i'm just gonna clone that repository in here so that's cloning great let's go ahead and go into it using cd so cd burger api and open up so we can see and great we now have our project up here you'll see the readme that i initialized so burger api my bag of your eye and there's nothing else in here the first thing we're actually going to do is create our database so because we know this is burgers i'm just going to go ahead and create a file called i'm just going to call it db jason so for database jason now i've already gone ahead and pre-made my burger objects i'm going to copy paste them here but we'll go through it now so we've got our burgers here and an array of two objects at the moment we know it's an array because we open up these two brackets right here and in it we have one object which is quite weirdly formatted let's go ahead and tidy that up i just like to make sure that everything you know is in line so it's easier to reach and here is our second object so once again let's tidy this one up to make sure everything's in line and just one here great so that is two burger objects with each burger i've got an id so we start from zero and then i do one we have the name of the burger the restaurant where we can find the burger the web address of the burger it's short description uh and it's ingredients so this one obviously has jackfruit coleslaw and a gluten-free bun we also have a dresses and a summer rae because you know perhaps it's a chain who knows this one mushi's i've only put in one address united kingdom but if i wanted to add more than i can similar to here as well so if i want another one i'll simply put a comma and then just copy paste and then fill that out but we don't so i'm just gonna keep it like that for now okay now that we have our data of burgers let's go ahead and get a package that will help us to create our database online so let's get our terminals up and running again if you've shut yours down like i have i'm just going to go back into the project perfect we are back in the project now i'm going to use a command called npm install jason g for global if you want to install it on your whole machine json server wait for that to install ah i am blocked my machine but don't worry if you also get a message like this you just have to point out which registry you essentially want to um download the package from i know that i want to download this from the npm registry so i would simply add that great and that is now done for us okay now let's start our json server by typing the following command json server so the package we literally just downloaded here and then i'm going to write watch like this and our database path or name so db jason and hit enter and that's it that is it done it was literally that easy we've created a database just with two commands that we can now access online so here we go we can now see buggers so this is why this was important this is now a route if we created another one that would be another route too but we only have one at the moment so if you want to have more than one in this file you just have to apply the same structure like this so making sure that the format is another object and then the name of your next database so let's go ahead and visit that now you will now see a uh database or an api of all the burgers that we have in our file awesome now i'm going to show you something else because obviously i want to be able to use this uh with you i want you guys to see it too so the next thing i want to do is actually deploy this using heroku okay so once we do this you will be able to see this as well at the moment it's just on my local machine see localhost 3000. so i need to be running this in order to see it so let's do it right the first thing we need to do we're actually going to do this from the command line tool mainly but we need to actually go and sign up for heroku if you haven't already so let's do it i already have an account but i'll just show you what we need to do heroku let's go ahead and sign in obviously if you haven't just fill that out i'm just gonna log in because you know i can great signing in let's save that okay so we have now signed in here is your dashboard there's no need to do anything here let's go over to our terminal so we currently have this up and running we can get burgers i'm going to cancel this by having control c so cancel that for now one thing i am going to do is actually add the files to my uh repository before we carry on so i'm going to do this get add dots get commit add burgers oops get commit add burgers just make sure to get push okay so we've added our burgers we've signed up to heroku we can see if i refresh this that our burgers are here awesome nice okay the next thing we need to do is actually get our project up again get our terminal out and initialize this project because we're gonna have to actually write a little bit of back end in order to serve this uh set this up so i'm going to type npm in it just like that and go through these i'm just going to leave them as blank because i mean they're fine for fine for now it's okay yes you will now see that a package.json file has shown up amazing so you will see here a lot of information um we also need our package to show up so i'm just going to type npm i install against a json server because obviously we have it on our local computer but if we sell this up to kuroku then it won't um it won't know that we need this package so i'm just going to go ahead and do that again once again i need to tell my computer which registry to go to so registry npm jess and just wait for that to install and there we go dependency json server so now we have it installed globally but also in this project next we need to actually write a script okay so this script i'm going to do here and i'm going to call it start and then in the start command i want to just serve up this file which i have not written yet server js so this is like our mini backend now once again i've already pre-made this for you so i'm just gonna copy and paste this here we need to get the package that we have just installed and use it in this file like this we then create invoke it like this and then get the variable server so that we can then use this for middlewares on a router we get the router at the moment there's just one file which is this database json file and then we have some middlewares if you don't know much about backends maybe do some research here but obviously this is just a quick simple one so feel free to take this code if you want and of course we have a port so this is going to show us uh what port that we serve too great that is our back end done we need to do one more thing before moving on and that is just add a git ignore file this git ignore file is for us to essentially tell our project which uh files to ignore which folders to ignore i'm going to tell it to ignore node modules this means that you know when we push these files up to github then we will ignore the nerd modules because we don't want them uploading to github they're too big uh they take up a lot of space and realistically if someone pulls down a project they're going to want to install those uh dependencies first anyway and then they get their own node modules folder build up so we want to ignore that ignore node modules cool okay this is looking good so we've got this project set up let's go ahead and re-add this to our repository so get add get commit add backend add server let's put server get push gin hedge awesome so now here are all our files but no node modules because that is thanks to our dot get ignore file amazing okay let's go back let's get up our terminal so we've already signed up to heroku for those of you who haven't used it before you need to write this command okay so it was essentially installing heroku this way in order for us to be able to use it correctly from our command line tool so this is going to take a while i already have it so it's just updating things for me okay that is done already installed and up to date yours will take a little while longer the next thing we need to do is actually npm install global heroku once again you probably won't need this i just needed to tell my computer which registry to download from as i download from a few registries okay once again that will take a while hopefully not too long okay once that is done we need to just check that that's done i'm going to check my version i've got heroku 7.472 okay so now we're going to create a project using heroku i'm going to go heroku 8 and then pick a project name uh my verb go api creating and amazing we now have mybug api heroku.com awesome okay now when you just need to log in so if you haven't already i'm just going to make sure you are logged in because i know this can cause a few issues so here we login okay press any key and just make sure you're locked in here i'm showing you this uh just in case that you know some of you got logged out because this is an important step cool you will now see here that i am logged in as any akubo now let's actually go ahead and create our project so heroku create i'm going to call it my burger api project it's a bit long but sure why not and that is done we now are live on this link right here cool we still have a few more things to do we need to actually push our project that we just made onto here so i'm gonna do that with get push heroku main because this is what we're working in we're working in maine and just wait for that to create itself okay build has succeeded that is good okay and her roku open and ta-da we have done it we've created a live site okay so i can go ahead and share this with anyone and then here we have burgess ta-da so i can even just go directly to this link and you will see the burgers that we have made amazing so of course there's only two on there i really want to try build this up over time so if you do have any burgers that you have tried which you think should definitely go on my list then please do reach out please do create a pull request to my project um hopefully you know how to do that it would simply be a case of cloning it and then pushing it to my branch thank you so much for watching i hope you enjoyed it i hope you can see now how simple it is to create your own sort of json file that you can tweet as an api to get data from for your own personal projects so thanks so much for watching again if you did enjoy this video please do like and subscribe so i know to keep creating more and i'll see you again soon

Channel: Code with Ania Kubów

Views: 139,120

Rating: 4.8733401 out of 5

Keywords: burger api, make an api, deploy an api, heroku, burger list, ania kubow, coding tutorial free, 100daysofcode, learn javascript for free, javascript bootcamp, coding bootcamp, udemy coding, scrimba, learn javascript, api projects, coding projects, open source, open source api, freecodecamp, computer science, javascript games, rest api, restful api, how to, make your own api, deploy api, create an api, create an api in javascript, make an api easy, api tutorial

Id: FLnxgSZ0DG4

Length: 16min 45sec (1005 seconds)

Published: Sun Nov 29 2020