Remove frontend work delay by using mockservice.io — Angular example

From the beginning, we knew and our users confirmed it, that most powerful thing in mockservice.io is allowing developers to start their work simultaneously. Have you ever started developing a new application or a new part of an existing application? Nowadays we still often separate our job to frontend and backend parts and it can bring some developers delays. Frontends developers say that they need to wait till API will be finished because they don’t know how JSON data structure should look like — sounds familiar?

We suggest to organize a meeting with both, frontend and backend developers and try to establish a data communication contract. You can do this on the blackboard or a piece of paper, but maybe a better way is to follow our slogan “Don’t waste your time. Simulate your backend and make your life much easier.”. Using mockservie.io we guarantee you when developers leave the meeting room, you will get something more than only an established data contract, you will get a fully worked, mocked, waiting for querying API… and you save a few trees or markers 😉

We’re an IT company, we like to code and it satisfies us. So instead of just writing important slogans, we want to show you, how you can use mockservice.io to simulate a simple REST API and adopt it in Angular application.

In the example below, we’d like to introduce you, how to create shop basket mock API. We assume that developers agreed on shop basket product data structure and it should look like:

{ productId: number, amount: number }

There are also be three endpoints:

GET /api/my-basket - Returns all product collected in the basket
POST /api/my-basket/products - Add product to basket
DELETE /api/my-backet/producs/:id - Remove product from basket

Go to mockservice panel and log in to your account. Start from creating a new shop project and three basket management endpoints.

Now let’s create POST endpoint with specified request attributes:
Name: add a product to the basket
Path: api/my-basket/products
HTTP method: POST
Leave response as default — it should return OK HTTP status code (200) with no body. Save defined endpoint.

Creating DELETE endpoint will look very similar, one of the biggest difference is we will be using a regular expression path matching. So, create new endpoint as in the example above, but use specified request attributes:
Name: remove a product from the basket
Path: api/my-basket/products/([0–9]+) — it allows mockservice.io to match any url with any number identifier, for example api/my-basket/products/1, api/my-basket/products/99.
HTTP method: DELETE

The last part in mockservice.io is to create GET endpoint that returns all items collected in the basket. In this part we can prepare one big JSON array, but nested of it we will present you our new, awesome, and unique (when you compare mockservice.io to other mocking tools in the market) tool — dynamic body definition. So, create new endpoint based on your experience from previous endpoints and use specified request attributes:
Name: get all basket items
Path: api/my-basket
HTTP method: GET
Response header: name=Content-Type, value=application/json
Now it’s time to define the response body, to do this enable the Dynamic toggle button and write a simple javascript function that returns 10 basket items with the random amount (from 0 to 100).

function getBody(requestContext) {
let body = [];
for (let i = 0; i < 10; i++) {
body.push({
productId: i,
amount: Math.floor(Math.random() * 101)
});
}
return body;
}

The angular part will be also very simple and we focus on how to define our HTTP client and how to query mockservice.io. The first step is to prepare typescript basket item model.

export interface BasketItem {
productId: number;
amount: number;
}

Now, we’re ready to create our communication service.

import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http';
import { BasketItem } from './basket-item'
@Injectable()
export class BasketService {
// instead of using hardcoded url use environment constant
private _baseURL = 'https://shop.mockservice.io/api/my-basket';
constructor(private _httpClient: HttpClient) {
}
public async addProduct(item: BasketItem): Promise<void> {
const url = `${this._baseURL}/products`;
await this._httpClient.post(url, item).toPromise();
}
public async removeProduct(productId: number): Promise<void> {
const url = `${this._baseURL}/products/${productId}`;
await this._httpClient.delete(url).toPromise();
}
public async getProducts(): Promise<BasketItem[]> {
return await this._httpClient.get<BasketItem[]>(this._baseURL).toPromise();
}
}

That’s all. In a few minutes you get a working, mocked API that is ready to querying in Angular application — no delays, without waiting for backend developers!

If you want more posts like this, just share mockservice.io with your friends and send us feedback, please!