Before you go, check out these stories!

0
Hackernoon logoBack-end Data and API Prototyping with Faker.js and JSON-Server by@greenroots

Back-end Data and API Prototyping with Faker.js and JSON-Server

Author profile picture

@greenrootsTAPAS ADHIKARY

UI/UX | Blogger @blog.greenroots.info| Speaker

Introduction

We are agile! In most of our projects we are asked to develop User Interfaces in parallel to the back-end services and APIs. This gives us the challenge of Implement and Test the User Interfaces without the real and real-like data availability. Not only that, how about the APIs? Can it be faked such that,

  • User Interfaces can be integrated with REST APIs at Day one?
  • These APIs provide interaction points almost similar to what it would be with actual data?
  • The calls can have over the wire such that, we get a feeling of retrieving data from a remote server(that mimics the real-life use-case)
  • Can it be done in few minutes?

For most of the projects where I less worry about the truthfulness of the data but, rest of it matters, I would like to use the combination of these:

Faker.js

Faker.jsย helps us building massive amount of Fake data in real quick time. Though the data is fake, you can still build the data with the required type, structure with which the User Interfaces can be tested early.

It has got various methods to provide data related to address, finance, commerce, date etc.

JSON Server

JSON Serverย helps us in getting a full fake REST API withย zero codingย inย less than a minute! It is insanely true. The beauty of it is, it uses a JSON file as a data store which can be built easily withย Faker.js.

Showcase: Quick Steps

As we have got a high level introductions to bothย Faker.jsย andย JSON Server, let us see them coming together to solve the data and API prototype problem, faster.

Create a New Project

  • Create a directory with a name of your choice. say,ย json-faker-server.
  • Change to the directoryย json-faker-server.
  • Doย 
    npm init
  • Answer the questions to create a node project. Now, you must have a file calledย 
    package.json
    ย created.

Install Dependencies

  • Install Faker.js
  •  npm install faker --save
  • Install JSON Server
  •  npm install json-server --save

Create a Database

We will be creating a database(db.json) usingย Faker.js.

  • Create a file calledย 
    index.js
    ย at the root of the folder.
  • Create Fake data of your need. In the following example, I have showed how to createย userย data with the properties make sense to me.
  • const faker = require('faker');
      let database = { users: []};
      const threshold = 1000;
    
      for (let i = 1; i<= threshold; i++) {
      database.users.push({
        id: i,
        name: faker.name.firstName() + " " + faker.name.lastName(),
        job: faker.name.jobTitle(),
        about: faker.lorem.paragraph(),
        phone: faker.phone.phoneNumber(),
        userName: faker.internet.userName(),
        email: faker.internet.email(),
        salary: "$" + faker.finance.amount() + "M",
        // You can also use faker.image.people() for image
        image: "https://source.unsplash.com/1600x900/?user", 
        country: faker.address.country()
      });
     }
    
      console.log(JSON.stringify(database));
  • In theย scriptsย ofย package.jsonย add this,
  •  "generate": "node ./index.js > ./db.json",
  • Now, you can generate 1000 user records(in db.json) just by running this:
  •  npm run generate

Create the Server and API

  • This step is way more simpler. In theย scriptsย ofย 
    package.json
    ย add this,
  •  "server": "json-server --watch ./db.json"
  • Now, you can start the server using,
  • npm run server

    You will see the server running on the default port(3000). The API will be available @ย localhost:3000/users

    API Functions

    These are the API endpoints we'll be able to use via JSON REST API server:

    • GET /users for getting the users
    • GET /users/<id> for getting a single user by id
    • POST /users for creating a new user
    • PUT /users/<id> for updating a user by id
    • PATCH /users/<id> for partially updating a user by id
    • DELETE /users/<id> for deleting a user by id

    We can use _page and _limit parameters to get paginated data as well. That is not all, there are options to search, sort, slice etc, without writing a single line of code. Seeย hereย for more details.

Links and Resources

  • There are ways to deploy and host theย JSON Serverย on Heroku, Now, Azure etc.ย Hereย is a great read on how to do it. I have deployed theย usersย API onย Heroku. Here it is:ย json-faker-server.herokuapp.com/users
  • All aboutย Faker.jsย can be foundย here.
  • Read aboutย JSON Serverย fromย here.
  • All the code examples in this blog post can be found at myย GITHub Project.

Hope you enjoyed reading it. That's all for now.





Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.