Simplest method to build and sell API with VS Code

Thu Nov 03 2022

12 min read

In this guide, we'll use VS Code to create our own API. We will utilize the RapidAPI Client to test our API.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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".

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.

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.

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.

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
{
"name": "michelin"
}

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
{
"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
{
"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
{
"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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.