How to Create API-Centric Web Apps
Sep 01

How to Create API-Centric Web Apps

As we are all aware, in today’s hyper connected world of applications, it is not uncommon for any product, service or application to have APIs. APIs (Application Programming Interface) have become the de-facto foundational technology for enterprise app development and more specifically for Web applications.

An API-Centric or API-Driven Web Application is a web application that basically executes most, if not, all its functionality through API calls. In an API-Centric web application, front-end communicates with backend using just APIs.

There are a number of advantages of developing an API-centric web application, namely,

  1. Easy consumption on multiple devices. RESTful APIs provide a lightweight integration model that significantly helps in creating mobile applications.
  2. Business logic is well contained with individual APIs.
  3. Ease of application development as focus of application in on the front end user interaction.
  4. Forces Reuse, as APIs developed can be used by multiple application on multiple form factors.
  5. With the proliferation of APIs (Open, Cloud, SaaS) etc., developing applications becomes faster and easier.

In this post, we will see how developers can easily create API-Centric Web applications using WaveMaker Studio. Using Import functionality, a developer can use a wizard to import REST, SOAP APIs into the application development. Figure 1, shows how a REST API is imported in Studio,

api centric architecture

Figure 1: REST API Import Wizard

REST APIs can be secured or non-secured. WaveMaker REST API Import Wizard allows for quick consumption of Secured as well as Non-Secured REST APIs. Secured APIs can be imported in 2 ways,

  • Using Basic HTTP Authentication, passing in Username and Password. Enable the HTTP Authentication check box as shown in Figure 2, to import the API.

api centric

Figure 2: Importing a HTTP Basic Authenticated REST API

  • Passing Security Tokens via HTTP Header properties. For example in order to authenticate via OAuth Security, Authorization: Bearer token is sent in the header to get back an OAuth access token. See Figure 3 that shows how the Authorization Token is passed to the API. Similarly other tokens, cookies can be used as required by the REST API.

api centric web application

Figure 3: Importing  OAuth Enabled REST API

API-Centric Applications also make it easier for external applications (Mobile as well as Web) to integrate to it easily. It does it by exposing REST APIs to the external world.

WaveMaker Studio soon [1] will have support for creating a Swagger 2.0 compliant API Specification file for the auto generated REST APIs as part of the Application developed. See previous post on API Designer that talks about Studio-Auto generating REST APIs. In the upcoming version, API Designer will generate Swagger conformant REST API documentation. More about it in a later blog post. Figure 4 shows below the Swagger 2.0 document for the HR DB (Sample DB) REST APIs auto-generated by Studio.

how to create an api for a website

Figure 4: Swagger 2.0 document for the HR DB

This Swagger document can also be taken and used to publish the APIs for the external world using WaveMaker Gateway product.

Excited about developing API-Centric applications using Studio?  If so, login to WaveMaker Online and create one. If you have any suggestions and feedback  contact us.

Mayur Shah (

WaveMaker Passionate Technologist

About The Author

Mayur Shah - Customer Success - Enterprise (Asia). Mayur’s expertise middleware and software architecture at BEA Systems, Cisco and Informatica, before joining the WaveMaker team, helps him in being deeply technical and honest in communication. Mayur has experience working with several successful enterprise CIOs, software decision makers and architects, bringing business and technical strengths.
We use cookies to provide you with a better experience. By using our website you agree to the use of cookies as described in our Privacy Policy. Continue