- [Narrator] When you're developing an API
and want to test how data is displayed,
you may want to start with some mock data.
Mock data generation can be a tedious task,
but fortunately there are resources available
to help us quickly and easily put together what we need.
One such resource is a website called Mockaroo.
I have used this countless times,
and it is incredibly helpful and easy to use.
On the landing page of Mockaroo,
you're prompted with a variety of field names
and corresponding data types.
For the purpose of this video,
we are going to keep things very simple.
But if you ever need to generate mock data,
know that there are many options here for you.
These fields and types represent the information
that will be housed in the JSON data
that we are going to generate.
I'll start by removing the last two items,
gender and IP address.
So now you should just have four fields listed
that will be included in our mock data,
ID, first name, last name, and email.
Directly below the listing of fields
you'll see a line that starts with rows.
Let's reduce the number of rows to 25.
For the purpose of our example, we don't need a ton of data,
so let's just keep it simple.
Beside the row input is a format dropdown.
We want this data to be in JSON format,
so let's go ahead and change that from CSV to JSON.
You'll see two new check boxes appear,
and we can just keep those selected.
That's it, so now we click on the download data button,
which is fixed to the bottom of the page.
And now we have our mock data.
My file was saved in my machine's download folder.
So I'm going to go ahead and change the name of it
to simply mock.JSON.
You can name this file whatever you would like.
I'm simplifying the name
in order to make it easier to reference in our project.
Once you've located your mock file,
go ahead and transition back to your code editor.
From here, we need to add a folder
to house our newly generated mock data.
You can add this from the command line,
if you choose or through the editor.
I'm going to go ahead and use VS Code to add the folder.
I'll click into the main section with my files,
and then click the folder icon with a plus sign.
And I'm going to name this folder data.
Next let's bring our data into the project.
For ease I'm just going to simply
drag and drop the file into the newly created folder.
This will open up the file automatically,
and if it didn't, for whatever reason,
depending on how you pulled it into your project,
go ahead and open it.
And let's just take a quick look at the data that's there.
On Mockaroo we specified that we wanted to use ID,
first name, last name, and email.
And we can see that all of these fields are there for us
with that mocked data.
The first thing we need to do in order to use this mock data
is import that into our index.js file.
So we can go ahead and close this mock.json file.
And now in our index JS file,
we're going to import the mock data.
So right below where we imported express,
we're going to import data from,
and then ./ 'cause we want to get to that data folder,
and then mock.json, all right?
So make sure you go ahead and save that.
Now we're just going to simply log out the data.
We're going to modify our existing app.listen function
with this mock data.
So I'm just going to add right below an additional console log,
and we're going to place the data in that console log.
So now we're ready to run our application.
All right, and while it's booting up,
I'm going to go ahead and increase the size of our terminal
so we can see that we now have all of our mock data
being logged out in our terminal.
So we have our port that is running here on port 3000,
our message that we did in the previous video.
And then now we have all of our mock data
being logged out here in the terminal.
Before we move on,
there are a few things that I want to call out
to make sure that you understand the distinction
between our server side code and our client side
or front end code at this point.
If we see the project running in the browser,
I think it will help illustrate
the difference between the two.
In our browser, let's go ahead and open a new tab,
and go to local host 3000 where our server's running.
When you get there,
you'll see that a message is printed, cannot get,
and you may have expected to see our mock data loaded here.
What does the statement cannot get mean?
At this point in our project,
we have not implemented any HTTP methods
or created any routes to fetch data.
The get method is an HTTP method used to retrieve data
that we will discuss in the next video.
So what about our mock data?
Let's explore this question by opening our dev tools,
which you can do on a Mac
with Control, right click, inspect.
Let's see if anything is being logged out
in the console here, which we might expect.
As you can see, we do have this error,
but don't worry about that right now,
but you can see that our console is clear.
We don't see our mock data logged out in our browser
because we logged the mock data on the server.
Our browser console is tied to the client side
while our terminal or command line is logging out
what we specify in our server.
The goal in working with express and node in general
is to bridge that data from the server to the client.