Build an API without leaving VSCode! (Then Sell it $$)

We will also learn how to sync this API with the RapidAPI Hub and RapidAPI Studio so that you may sell it. So let's implement it and create our own API.

Step 1

The first step is to install the RapidAPI Client extension by clicking here.

RapidAPI Client for VS Code

After that, install this extension in VS Code by clicking the install icon.

I've already created a directory titled Restaurants of this guide. This repository comprises the files index.html, style.css, and app.js.

Installing RapidAPI Client

Step 2

I would like to connect the RapidAPI Client to my RapidAPI account since we are currently working on a local project. Before we can do so, we must sign up. Please create an account if you haven't already.

RapidAPI Hub

After logging into RapidAPI Hub, we can also access RapidAPI Studio. As soon as you launch the RapidAPI Studio, you will see a dashboard containing your various projects.

RapidAPI Studio

Let's now sync this with VS Code. RapidAPI Client requires you to sign in with OctoPaw before proceeding, after which you may select Allow to continue. Once you do so, you will be effectively connected to RapidAPI Studio. Here, you need to sign in with your RapidAPI credentials. Then, you will be directed to the authentication dashboard.

You are now logged in and can begin synchronising with RapidAPI.

Step 3

During the creation of a new project, you will be asked where you wish to create it. You can choose your personal RapidAPI account. This permits the synchronisation of your project with your RapidAPI Studio. Give your project a name. I will call it restaurants and press Enter.

It will further ask us whether we want to sync our local project. Select yes, and finally, you will see the RapidAPI Client extension says that the project is online.

Creating a new project on RapidAPI

Step 4

Let's proceed and use any RESTful API. I'd like to employ REST Countries as an illustration in this guide. This website contains the URL that we require, i.e.,https://restcountries.com/v3.1/all.

Leveraging REST Countries

You can copy this link and paste it into the app.js file. After that, you can right-click on the link, and click on RapidAPI: Create new request from the context menu to open up the request.

Creating new request

After opening the request, you can give it a name. Let's call it getCountries and then send it. You'll notice that it returns a 200 OK response. The request snippet that opens will be in TypeScript format.

Additionally, we can select Node.js and send it again. You will observe that a JSON response is returned for a getCountries call.

Selecting request snippet in node.js

Let's return to VS Code and sync everything by clicking the symbol in the upper left corner of the window. This will synchronise to our RapidAPI Studio; after it does, you will see the request populate in that environment.

Synchronising to RapidAPI Studio

Once more, you have the opportunity to select the language that best suits your needs. As an illustration, we can use the Node.js/Fetch package. Click the send icon, and a response in JSON format will appear.

Sending response in node.js/fetch package

Let's construct our own API now that we understand how this process works and how rapidly we can get the requests.

Step 5

Let's begin by developing a database, and then I'll demonstrate how to rapidly develop an API based on that database. [DataStax] (https://www.datastax.com/) is a cost-free online database that can serve this purpose, and you can access it through their website.

Previewing DataStax

Once you sign in, you can create a new database in DataStax just by clicking on the Create Database icon.

Developing a database on DataStax

After you have clicked on it, you can give your database a name. Let's suppose we can name it "restaurants," and under the Keyspace Name, we can name it "reviews". Following that, you will be prompted to choose both a provider and a region. You can choose the one that is more pertinent to you and then click the save button.

Filling out information on DataStax

You can see that the database has been created. You will also see your database credentials here. It will be used to access the database, so go ahead and keep it safe somewhere.

To continue, please select "Go to Database".

Database credentials

It will take some time to load, but once it is complete, you can view a dashboard containing information about the database you have just created.

Viewing your database on dashboard

Step 6

The following step requires you to click on "Connect" from the navbar, which will establish a connection with the database. You can connect using a variety of methods, such as the Document API, the GraphQL API, or the REST API. All of these methods are available to you. You are free to pick anyone that appeals to your interest.

Connecting with API

For the purposes of this guide, let's go with the Document API. Simply clicking on the link that takes you to the document list will allow you to bring up Swagger UI for use.

Document list on Swagger API

We should now generate a namespace ID by clicking the POST. In the description, you can see that the token has already been populated. Let's refer to the namespace ID description as reviews because that is what we originally referred to it as.

Now I will create an object that gives us the name of the collection that we want to create. So I'll go ahead and name our collection “michellin” to symbolise Michelin star restaurants. Then click on execute.

json
Copy
{
	"name": "michelin"
}

Creating an object

We will receive a 200 response, which means it has worked. This is looking good. So we've created our collection.

Step 7

Now, let's create a document to add to our collection by clicking the POST (Create a new document). Again, let's test it out. I will write reviews in the namespace, and michelin in the collection Id. In the body, we will construct a second object that represents michelin. I have previously completed this for you. So here you go:

json
Copy
{
	"name": "Les Amis",
	"address": "Shaw Centre, #01-16, 1 Scotts Road, 228208, Singapore",
	"country": "Singapore",
	"cuisine": "French",
	"link": "https://quide.michellin.com/en/singapore-region/singapore/restaurant/les-amis",
	"website": "https://www.lesamis.com.sq/",
	"stars": 3
}

Let's proceed to the execute button. You will notice that we have received a single review, which is accompanied by a document Id that is unique to the object we just created. I can now insert two additional objects for guide purposes. Here is a second Odette restaurant, also in Singapore, and likewise with three stars.

json
Copy
{
	"name": "Odette",
	"address": "Natioonal Gallery, #01-04, 1 Stt. Andrew's Road 178957, Singapore",
	"country": "Singapore",
	"cuisine": "French",
	"link": "https://quide.michellin.com/en/singapore-region/singapore/restaurant/odette",
	"website": "https://www.odetterstaurant.com",
	"stars": 3
}

Then a third one also in Singapore, it's called Zen, and it also has three stars. So there we go.

json
Copy
{
	"name": "Zen",
	"address": "41 Bukiit Pasoh Road, 089855, Singapore",
	"country": "Singapore",
	"cuisine": "European Contemporary",
	"link": "https://quide.michellin.com/en/singapore-region/singapore/restaurant/zen",
	"website": "https://www.rstaurantzen.com",
	"stars": 3
}

You can click execute and that has been created.

We have just added three documents to our michelin collection in the reviews key space. Now we'll click GET (Search documents in a collection) and fill in the required fields. We shall write reviews in the namespace ID. Similarly, we can write michelin in the collection ID field. Leave the remaining fields blank and click the execute button.

Filling out information in GET document

You'll see that in response, we're getting back all three restaurants. We will copy the request URL and go back to VS Code.

Step 8

Let's start a new request on VS Code. We will retrieve all restaurants that have been created in the Swagger UI database. We need to paste the request URL and give it the name getRestaurant. Additionally, we must provide a header to connect with our Astra database. Returning to the Swagger UI, we will copy our "X-Cassandra-Token."

Let's give Headers Name in VS Code as X-Cassandra-Token, and in value, you can paste the token. We also have to put accept JSON. So let's go back to the Swagger UI database and copy the credentials. In the Headers Name again, you can write Accept and in value application/json. Since I prefer response in Node.js, I will select that in the Request Snippet option and click Send.

Starting a new request on VS Code

We will then sync this with the RapidAPI Studio after receiving a 200 OK response. By altering the request snippet's settings, you may also convert the request snippet to JavaScript and fetch. You can send it, copy the code, and use it to make requests by simply pasting it. It can spare you from resolving and chaining promises in great detail.

Syncing and copying the code

Step 9

Since we've already submitted one request for restaurants, I can now actually make another request for a specific restaurant. So let's call this getOneRestaurant. You may access the URL by going to the Swagger UI database and clicking on GET (Get a document).

Here, you must fill out certain information, such as the namespace ID (which should read "reviews") and the collection ID (which should read "michelin"). For document ID, you can copy the ID from your response for the Les Amis restaurant in VS Code and paste it there.

Copying document ID for new request

Click execute after leaving the rest blank. I will bring back that one restaurant.

We will now complete the API request in the same manner as we did for the first one. We will enter the URL, the name, and the value of the headers, and click send. You can sync the response after receiving it by clicking the sync icon.

Filling and sending out API request

You will see those two requests on your RapidAPI platform once it has been synchronised. In a similar manner, we may develop other requests, test them, and create Hub Listings for the API. People can access your database this way, and you should charge for it. So let's go ahead and create it on Hub Listing.

Step 10

Here, uploading a logo should be done first. We can choose the category "Food" and upload a generic logo. Additionally, we must include a short description below, such as An API that will allow you to get the latest reviews on Michellin star restaurants.

Scroll down after that to keep the API project private for the time being. The base url, the URL from which we obtain all of our restaurants, should then be included. The endpoint will be omitted because we'll use it in the endpoint section. Let's hit save.

Uploading information on Hub Listing

Step 11

After that, let's have a look at the gateway. Check that the key authentication set in the Gateway is set to RapidAPI Auth. Next, we'll add the header, and in that space, insert the X-Cassandra-Token and its value before clicking the "save" button.

Saving information on Hub Listing

Step 12

Now let’s create two endpoints. Create one that will get all restaurants. The endpoint will be michelin, and I will simply refer to it as Michelin Restaurants. In the description, we can include "a list of Michelin restaurants and reviews." Go ahead and save it.

Creating Endpoint

Create another endpoint to retrieve one Michelin restaurant. So let's call it the "One Michellin Star Restaurant" and include a brief description. We can write "Retrieves one restaurant based on the document id."

We will just have to copy the structure that we had when we made the request to get one Michelin restaurant. So I'll write /michellin/id and click save.

Creating additional Endpoint

Step 13

The next step is to monetize this API.

Let's monetize this. We can set it on a monthly subscription and rate limit it. We can go with the maximum limit being 500/hour and subscription price as $20. This is BASIC monetize type that we can select.

Selecting Basic plan for monetization

In addition, we can set the Quota type to Daily, the Quota Limit to 200 per day, the Limit type to Soft limit, and the Overages to $100 per day. So this pass can now make 200 requests each day, but it will still cost money. This can now be viewed in the Hub.

This is the API that I created as a demonstration to show how to construct your own API using only Visual Studio Code and then deploy it on RapidAPI.

Restaurants API on RapidAPI platform

Step 14

The final stage is testing the endpoint. I will use the GET method to retrieve Michelin restaurants and test the endpoint. You will observe that our three restaurants are being sent as a response. We have all of our information, and we can retrieve it using the document's id.

You will notice in the code that the Cassandra token is not shown. Everything is secure, and we will enter a RapidAPI-generated concealed URL.

Let's test the endpoint using the document ID we copied and passed as a parameter. We're getting that one restaurant back.

Testing the Endpoint

Now that the API is functional, it can be made public and no longer private.

Wrap up

This guide has provided an in-depth explanation of creating an API with solely VS code and upload it to RapidAPI in the most straightforward and uncomplicated way possible. Feel free to create your own API using this way.