DEV Community

Cover image for Create dummy APIs for faster prototyping πŸ‘¨β€πŸ’»βš‘
Gabriel Pinheiro
Gabriel Pinheiro

Posted on

Create dummy APIs for faster prototyping πŸ‘¨β€πŸ’»βš‘

πŸ–ΌοΈ Image by Gerd Altmann

Introduction

It's quite common to need a dummy API (mocks, stubs) while building a prototype, testing a hypothesis or simply creating the front end of an application in which the API isn't done yet.

The ideal is spending as little time as possible in the mocks so you can test hypothesis quickly, prototype without worrying about the back end and deliver the application with confidence that it'll work with the real API.

By the end of this article, you'll have created a mocked API accessible from anywhere without writing a single line of code. We'll use Mocko as its forever-free plan has the features we need and limits that don't get in the way.

Step 1: Create an API on Mocko

Go to https://mocko.dev/ and log in using your GitHub account:

Click "Log in with GitHub"

Authorize Mocko to read your email

Now you'll choose a good name and URL for our mocked API, I'll go with Insane Goat:

Fill "Project name" and click "CREATE"

Step 2: Create your first Mock

Now that you have a dummy API created, it's time to create your first mock like so:

Click the "NEW MOCK" button

Choose a name for your mock and fill the request and response information. To begin, mock a 200 response with Hello from Mocko! on GET /hello:

Fill mock data and click "SAVE & DEPLOY"

Now that you created you first mock, you can try it by clicking the "open" icon in the list or using the URL in the top bar:

Copy project URL

In my case, I can see mine in the URL:
https://insane-goat.free.mockoapp.net/hello

Step 3: Create a dynamic mock

You can use Bigodon in your mocks to create templates that are evaluated with request data as context. What you write between {{ and }} allows you to access fields from the context like request.params, request.body, request.headers, request.query.

Let's create an endpoint that greets the user by name using the parameter provided in the URL. Mock the response Hello, {{ request.params.name }}! in the endpoint /hello/{name} like so:

Click "NEW MOCK"

Fill mock data and click "SAVE & DEPLOY"

Now, any parameter you pass in the URL gets used by the template:

Template uses URL param

To zhuzh it up even more, you can use Bigodon helpers to transform data, iterate over arrays, run conditions and a lot more. Here's an example:

Hello, {{capitalize request.params.name}}!
Enter fullscreen mode Exit fullscreen mode

Step 4: Create an advanced template

As shown above, you can use conditionals, loops, helpers, custom helpers and a lot more. Let's create a mock template on GET /users/{name} that returns dummy user data for users whose name start with g and 404 otherwise:

{{#startsWith (downcase request.params.name) "g"}}
  {
    "id": "{{uuid}}",
    "name": "{{capitalize request.params.name}}"
  }
{{else}}
  {{setStatus 404}}
  {
    "error": "User not found"
  }
{{/startsWith}}
Enter fullscreen mode Exit fullscreen mode

Here's the result:
https://insane-goat.free.mockoapp.net/users/george
https://insane-goat.free.mockoapp.net/users/alice

Step 5: Proxying your API

If you already have an API to use and you wish to mock only some endpoints, you can use the proxy feature to proxy your API and mock only specific endpoints:

Proxy settings

Conclusion

Mocks don't have to be limited and must be easy to create, after all, that's the point of using mocks: Quickly develop even when your dependencies aren't ready.

This is only possible due to Free Open Source Software, if you like the result make sure to leave Mocko and Bigodon a star on GitHub.

I'll be happy to hear your thoughts in the comments. Also, make sure to leave a heart if this article helped you πŸ˜ƒ

Discussion (5)

Collapse
highasthedn profile image
highasthedn

Omg what a timing! This week I have to setup an API mock for my team so my colleagues can test our new app while I'm on holiday the next two weeks. My plan was to setup an own solution with json-server but I don't have much time the next days.
Your post really saves my week my friend, this is a game changer

Collapse
bbb159 profile image
Bruno Paiva • Edited on

This seems to be a really useful tool. Absolutely going to use on my next projects

Collapse
manoj_shukla_10 profile image
Manoj Shukla

A really useful solution. Thanks for sharing this helpful and easy to use solution.

Collapse
lewiscowles1986 profile image
Lewis Cowles

You can do this with getsandbox or just node+express+JSON or using postman mocks. The concept of the walking skeleton is not new, but it can be good for uniting front and back around "contracts".

Collapse
thiagopolv profile image
Thiago Pereira de Oliveira

This is exactly what I'm needing now. I'll certainly use Mocko in my projects from now on.