Make your own mock API (super simple)

 Hello everyone! In this weeks video I show you how to make your own RESTful API and deploy it onto the internet in just a few easy steps. This is thanks to the https://github.com/typicode/json-server package. Where you can get a mock REST API with zero coding in less than 30 seconds. For those of you who would like to add a burger, please make a pull request here, following the same format as discussed: https://github.com/kubowania/burger-api For those of you wishing to check it out live visit here: https://my-burger-api.herokuapp.com/b... A lot of you are wondering if you can interact with this database. Yes you can. You can make GET, POST, PUT, DELETE etc requests to it. You can even get an individual burger. For example if I want to get the Tribute Burger, which has an ID of 0, I would write: fetch('https://my-burger-api.herokuapp.com/b...) etc.... Please try adding a burger to the database, deleting a burger, it's up to you. Give it a go in your console logs. If you did like this video, please hit the Like and Subscribe button so I know to make more! 

 

0:00

hello internet so today i guess rather

0:02

selfishly

0:03

i'm going to show you how to make your

0:05

own open source

0:07

api and deploy it why because i want to

0:10

make my own open source api

0:12

i was looking for an api all about

0:14

burgers

0:15

i wanted faux burgers i wanted vegan

0:18

burgers i wanted veggie and halal

0:19

burgers like literally nothing i

0:21

couldn't find anything on the internet

0:23

that had

0:23

a vague resemblance to this so i was

0:26

like hey i'm gonna make my own and

0:28

show you guys how to do it too so

0:32

what do we want in this bugger api well

0:34

i'm gonna debug a name

0:35

i want an array of ingredients i want a

0:38

short description

0:39

sure that's quite like subjective but

0:42

it's fine i also want the address

0:44

of where i can find the burger or you

0:45

know addresses if it's a chain

0:48

so super excited about this let's do it

0:51

if you did like this video or do you

0:52

like this video please do like and

0:54

subscribe to my channel it really would

0:56

mean a lot as i would know to

0:58

keep continuing making content for you

1:00

guys

1:01

so hit that button and let's do it

1:04

burger api

1:08

okay so i have decided to start off on

1:10

my github repository page

1:12

that's so you guys can find my burger

1:14

api when i have finished

1:17

so i'm just going to go ahead and click

1:19

repositories and make a new one

1:21

so i'm going to call this burger api

1:26

description my burger

1:30

api i'm going to make it public and just

1:33

initialize that with the readme

1:35

so now if you want to find this project

1:38

you know

1:39

where to go um great okay so that's

1:42

where it is i'm actually just gonna

1:44

grab this uh clone it

1:48

open up my terminal now

1:51

in the directory of my choice so i'm

1:54

gonna go ahead and stick this in

1:56

personal projects because that is where

1:59

i keep miss my stuff

2:01

i'm just gonna clone that repository in

2:03

here

2:04

so that's cloning great let's go ahead

2:08

and go into it using cd so cd burger api

2:12

and open up so we can see and great we

2:16

now have our project up here you'll see

2:17

the readme that i initialized so

2:19

burger api my bag of your eye and

2:22

there's nothing else in here

2:24

the first thing we're actually going to

2:25

do is create our database

2:29

so because we know this is burgers i'm

2:31

just going to go ahead

2:32

and create a file

2:35

called i'm just going to call it db

2:39

jason so for database

2:42

jason now i've already gone ahead and

2:44

pre-made

2:45

my burger objects i'm going to copy

2:48

paste them here but we'll go through it

2:49

now

2:50

so we've got our burgers

2:54

here and an array of two objects

2:57

at the moment we know it's an array

2:59

because we open up

3:01

these two brackets right here

3:04

and in it we have one object

3:08

which is quite weirdly formatted let's

3:11

go ahead and

3:15

tidy that up i just like to make sure

3:18

that everything you know is

3:19

in line so it's easier to reach

3:23

and here is our second object so once

3:25

again let's tidy

3:26

this one up to make sure everything's in

3:28

line

3:30

and just one here

3:34

great so that is two burger objects

3:37

with each burger i've got an id so we

3:39

start from zero

3:42

and then i do one we have the name of

3:46

the burger

3:48

the restaurant where we can find the

3:49

burger the web address

3:52

of the burger it's short description

3:56

uh and it's ingredients so this one

3:58

obviously has jackfruit coleslaw and a

3:59

gluten-free bun

4:01

we also have a dresses and a summer rae

4:03

because you know

4:04

perhaps it's a chain who knows this one

4:08

mushi's i've only put in one address

4:10

united kingdom

4:12

but if i wanted to add more than i can

4:14

similar to

4:17

here as well so if i want another one

4:19

i'll simply put a comma

4:21

and then just copy paste

4:24

and then fill that out but we don't so

4:26

i'm just gonna keep it like that for now

4:29

okay now that we have our data

4:32

of burgers let's go ahead and get a

4:35

package that will help us

4:37

to create our database online so let's

4:40

get our terminals up and running again

4:43

if you've shut yours down like i have

4:46

i'm just going to go back

4:47

into the project perfect we are back in

4:51

the project

4:51

now i'm going to use a command called

4:53

npm install

4:55

jason g for global if you want to

4:58

install it on your

5:00

whole machine json server

5:04

wait for that to install ah

5:07

i am blocked my machine

5:10

but don't worry if you also get a

5:13

message like this

5:14

you just have to point out which

5:16

registry you essentially want to

5:18

um download the package from i know that

5:21

i want to download this from the

5:24

npm registry so i would simply add

5:28

that great and that is now done for us

5:33

okay now let's start our json server by

5:36

typing the following command

5:38

json server so the package we

5:41

literally just downloaded here and then

5:43

i'm going to write watch

5:44

like this and our database path

5:48

or name so db

5:51

jason and hit enter

5:55

and that's it that is it done it was

5:58

literally that easy

5:59

we've created a database just with two

6:01

commands that we can now access online

6:04

so here we go we can now see buggers so

6:06

this is why this was important this is

6:08

now a route

6:10

if we created another one that would be

6:11

another route too but we only have one

6:13

at the moment

6:14

so if you want to have more than one in

6:16

this file you just have to apply the

6:18

same structure like this

6:20

so making sure that

6:23

the format is another object and then

6:26

the name

6:26

of your next database

6:30

so let's go ahead and visit that now

6:37

you will now see a uh database

6:40

or an api of all the burgers that we

6:43

have in our file

6:44

awesome now i'm going to show you

6:46

something else because obviously

6:48

i want to be able to use this uh with

6:50

you

6:51

i want you guys to see it too so the

6:53

next thing i want to do is actually

6:54

deploy this

6:55

using heroku okay so once we do this you

6:59

will be able to see this as well

7:00

at the moment it's just on my local

7:02

machine see localhost 3000.

7:04

so i need to be running this in order to

7:06

see it so

7:07

let's do it right the first thing we

7:10

need to do we're actually going to do

7:12

this from the command line tool mainly

7:14

but we need to actually go and sign up

7:15

for heroku if you haven't already

7:17

so let's do it i already have an account

7:21

but i'll just show you what we need to

7:23

do

7:24

heroku let's go ahead and

7:27

sign in obviously if you haven't just

7:30

fill that out

7:31

i'm just gonna log in because you know

7:34

i can great signing in

7:38

let's save that okay so we have now

7:42

signed in

7:42

here is your dashboard there's no need

7:45

to do anything

7:46

here let's go over to our terminal

7:50

so we currently have this up and running

7:52

we can get burgers i'm going to cancel

7:53

this by having control c

7:55

so cancel that for now one thing i am

7:58

going to do is actually add the files

8:01

to my uh repository before we carry on

8:04

so i'm going to do this

8:05

get add dots get commit

8:10

add burgers

8:18

oops get commit add burgers just make

8:21

sure to

8:24

get push

8:32

okay so we've added our burgers we've

8:35

signed up to heroku

8:37

we can see if i refresh this that our

8:39

burgers are here

8:41

awesome nice okay the next thing we need

8:44

to do is actually get our project up

8:46

again

8:47

get our terminal out and initialize this

8:48

project because we're gonna have to

8:50

actually write a little bit of

8:51

back end in order to serve this uh set

8:54

this up

8:55

so i'm going to type npm in it just like

8:58

that

8:59

and go through these i'm just going to

9:00

leave them as blank because

9:02

i mean they're fine for fine for now

9:06

it's okay yes you will now see that a

9:09

package.json file has shown up

9:12

amazing so you will see here a lot of

9:14

information

9:15

um we also need our

9:20

package to show up so i'm just going to

9:23

type npm i install against a json

9:27

server because obviously we have it on

9:31

our local computer

9:32

but if we sell this up to kuroku then it

9:34

won't um

9:36

it won't know that we need this package

9:39

so i'm just going to go ahead and do

9:41

that again

9:42

once again i need to tell my computer

9:44

which registry to go to

9:46

so registry npm jess and just wait for

9:49

that

9:50

to install and there we go dependency

9:54

json server so now we have it installed

9:56

globally but also in this project

10:00

next we need to actually write a script

10:03

okay so this script i'm going to do here

10:06

and i'm going to call it start

10:13

and then in the start command i want to

10:16

just

10:17

serve up this file which i have not

10:20

written

10:21

yet server js so this is like our mini

10:25

backend now

10:27

once again i've already pre-made this

10:28

for you so i'm just gonna

10:30

copy and paste this here we need to

10:33

get the package that we have just

10:35

installed and use it in this file like

10:37

this

10:38

we then create invoke it like this and

10:42

then

10:42

get the variable server so that we can

10:46

then use this for middlewares on a

10:48

router

10:49

we get the router at the moment there's

10:51

just one file which is

10:52

this database json file and then we have

10:55

some middlewares if you don't know much

10:57

about backends

10:58

maybe do some research here but

11:00

obviously this is just a quick simple

11:01

one so

11:02

feel free to take this code if you want

11:05

and of course we have a port so this is

11:07

going to show us

11:08

uh what port that we serve too

11:12

great that is our back end done

11:15

we need to do one more thing before

11:17

moving on and that is just add a git

11:19

ignore file

11:20

this git ignore file is for us to

11:24

essentially tell our project which uh

11:27

files to ignore

11:28

which folders to ignore i'm going to

11:30

tell it to ignore

11:32

node modules this means that you know

11:35

when we push these files up to github

11:36

then we will ignore the nerd modules

11:38

because we don't want them uploading to

11:39

github they're too big

11:41

uh they take up a lot of space and

11:42

realistically if someone pulls down a

11:44

project

11:44

they're going to want to install those

11:46

uh dependencies first anyway

11:48

and then they get their own node modules

11:50

folder build up so we want to ignore

11:52

that

11:52

ignore node modules cool

11:56

okay this is looking good so we've got

11:59

this project set up let's go ahead and

12:01

re-add this

12:01

to our repository so get add

12:06

get commit add

12:09

backend add server let's put server

12:13

get push

12:17

gin hedge

12:24

awesome so now

12:27

here are all our files but no node

12:30

modules because that is thanks to our

12:32

dot

12:32

get ignore file amazing

12:37

okay let's go back let's get up our

12:40

terminal so we've already signed up to

12:41

heroku

12:43

for those of you who haven't used it

12:44

before you need to write this command

12:48

okay so it was essentially installing

12:50

heroku this way

12:51

in order for us to be able to use it

12:53

correctly from our command line tool

12:56

so this is going to take a while i

12:57

already have it so it's just updating

12:59

things for me

13:01

okay that is done already installed and

13:04

up to date

13:04

yours will take a little while longer

13:08

the next thing we need to do is actually

13:10

npm

13:11

install global heroku once again you

13:13

probably won't need this

13:15

i just needed to tell my computer which

13:17

registry to download from as i download

13:20

from a few registries

13:23

okay once again that will take a while

13:27

hopefully not too long okay once that is

13:30

done

13:31

we need to just check that that's done

13:33

i'm going to check my version i've got

13:35

heroku

13:36

7.472 okay so now we're going to create

13:40

a project using heroku i'm going to go

13:43

heroku

13:44

8 and then pick a project name

13:48

uh my verb go

13:52

api creating

13:56

and amazing we now have mybug

13:59

api heroku.com awesome

14:04

okay now when you just need to log in so

14:08

if you haven't already i'm just going to

14:10

make sure you are logged in

14:11

because i know this can cause a few

14:13

issues so here we login

14:16

okay press any key

14:19

and just make sure you're locked in here

14:22

i'm showing you this

14:23

uh just in case that you know some of

14:26

you got logged out because this is an

14:27

important step

14:30

cool you will now see here that i am

14:32

logged in as any akubo

14:34

now let's actually go ahead and create

14:36

our project so

14:37

heroku create i'm going to call it

14:41

my burger api

14:45

project it's a bit long but sure why not

14:49

and that is done we now are live on this

14:53

link right here cool we still have a few

14:56

more things to do we need to actually

14:58

push

14:58

our project that we just made onto here

15:00

so

15:01

i'm gonna do that with get push heroku

15:06

main because this is what we're working

15:08

in we're working in maine

15:13

and just wait for that to create itself

15:25

okay build has succeeded that is good

15:31

okay and her roku open

15:38

and ta-da we have done it we've created

15:42

a live site okay so i can go ahead and

15:45

share this with anyone

15:46

and then here we have burgess ta-da so i

15:49

can even just go directly to this link

15:51

and you will see the burgers that we

15:53

have made

15:54

amazing so of course there's only two on

15:56

there i really want to try build this up

15:58

over time

15:59

so if you do have any burgers that you

16:03

have tried which you think should

16:05

definitely go on my list

16:07

then please do reach out please do

16:09

create a pull request

16:11

to my project um hopefully

16:14

you know how to do that it would simply

16:16

be a case of cloning it and then pushing

16:19

it

16:19

to my branch thank you so much for

16:22

watching i hope you enjoyed it i hope

16:24

you can see now how simple it is to

16:26

create your own sort of json file

16:28

that you can tweet as an api to get data

16:30

from

16:31

for your own personal projects so thanks

16:34

so much for watching again

16:35

if you did enjoy this video please do

16:37

like and subscribe so i know to keep

16:39

creating

16:40

more and i'll see you again soon