Build and sell your own API

I Abandoned Postman for This NEW VS Code Extension | Build, Test & Sell APIs

How to earn money with images by building an API

Create a Recipe List App using Flutter and API

Build and Deploy a React Native App | 2023 React Native Course Tutorial for Beginners

BUILD AND SELL an API with Next.js, Vercel, and RapidAPI

Create a Dictionary app using an API from Rapid API Hub

Earn Money by Building and Selling APIs with ChatGPT

How To Build a MEME CREATOR Mobile App with FLUTTER

Build a React Native Meme Creator with API Calls and Nativebase UI for iOS & Android

Where to Host a Node.js API THAT'S NOT Heroku (FOR FREE!)

Build a TypeScript API with Express, RapidAPI, and Xata (Part 2)

Build a TypeScript API with Express, RapidAPI, and Xata (Part 1)

3 ways to build a Flight Widget! (JavaScript + Node.js + REST API + Database)

Build a Chrome Extension | How to Build & Publish a Chrome Extension in 10 Minutes?

How To Come Up With Coding Project Ideas

I'm Still Not Using Postman!! I Use This NEW VS Code Extension Instead...

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

API Project! Word Association Game

Build and Deploy a Modern YouTube Clone Application in React JS with Material UI 5 | RapidAPI

Build and Deploy a Better Spotify 2.0 Clone Music App with React 18! (Tailwind, Shazam, Redux)

How to integrate multiple APIs with your Laravel app using RapidAPI

This VS Code Extension will replace Postman

How To Build An API With Python and Use RapidAPI VS Code Extension In Development

How to CONSUME a REST API with JAVASCRIPT and Fetch + Promises with Error handling

Build and Deploy a Modern React 18 Fitness Exercises App With APIs | Golds Gym

Meme Generator Web App Tutorial from Scratch | Full Stack

Crash Course: API Testing with RapidAPI & GitHub Actions

Make Money As A Developer By Selling APIs

Turn an API into a Startup?! Build & Sell an API with JavaScript

Master the use of APIs and API Testing | Complete Crash Course

React Google Maps - Geolocation with React and TypeScript

Wordle Clone in JavaScript!

Perceiver for Cardiac Video Data Classification (AlphaCare: Episode 2)

Multiomics Data for Cancer Diagnosis (AlphaCare: Episode 3)

Mint a Genome NFT

Convolutional Networks for Heart Disease Prediction

Building a Node.js app (as a JavaScript noob)

Building a Health DAO with GitHub CoPilot

How To Build A Full Working API In Django and Publicizing IT On RapidAPI

Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video

Build & Deploy a Number Fact Discord Bot using Node.js and Heroku | Node.js | Rapid API

Build and Deploy a Modern Real Estate App | React Website Tutorial

Build and Deploy Google Search 2.0 with React & Tailwind CSS

Build and Deploy a Google Maps Travel Companion Application

Build and Deploy 5 JavaScript & React API Projects in 10 Hours

API Project! Build a Crypto Dashboard

API Crash Course - Integrate, Build, & Sell an API

5 API Projects in 5 hours

4 Steps to Make $Millions with an API

4 APIs at ONCE! | How To Manage Multiple APIs (Application Programming Interface)

Free video courses by Rapid and Rapid Developer Experts offer short to help you become a pro API Developer.

Rapid API Courses

H-EDUCATE

It is a very popular use case. A quick search tells us that over ninety thousand people search for "remove background from image" on Google every month!

Many websites and tools are providing this service. You can upload your images there and have their backgrounds removed in no time. However, their pricing is jaw-droppingly expensive, with some charging up to $1.99 per image. 

But, hold on, we've got a solution that will give them a run for their money. We can create a similar code that removes backgrounds from images. And you'll be amazed at how easy it is. The best part? You'll be able to make some serious cash with that ready-to-use Python script! It's super simple to use, and we'll show you how to create it into an API to sell it on RapidAPI Hub.

## Let’s Start

First, download and install [Visual Studio Code](https://code.visualstudio.com/) and [Python](https://www.python.org/downloads/) to get started. Once done, simply paste the following Python script into your code editor, and voila! 

```python

import torch
import torch.nn as nn
import torch.optim as optim
import numpy as np
import cv2
import uuid
import os
from model import U2NET
from torch.autograd import Variable
from skimage import io, transform
from PIL import Image

# Get The Current Directory
currentDir = os.path.dirname(__file__)
# Functions:
# Save Results
def save_output(image_name, output_name, pred, d_dir, type):
    predict = pred
    predict = predict.squeeze()
    predict_np = predict.cpu().data.numpy()
    im = Image.fromarray(predict_np * 255).convert("RGB")
    image = io.imread(image_name)
    imo = im.resize((image.shape[1], image.shape[0]))
    pb_np = np.array(imo)
    if type == "image":
        # Make and apply mask
        mask = pb_np[:, :, 0]
        mask = np.expand_dims(mask, axis=2)
        imo = np.concatenate((image, mask), axis=2)
        imo = Image.fromarray(imo, "RGBA")
    imo.save(d_dir + output_name)

# Remove Background From Image (Generate Mask, and Final Results)
def removeBg(imagePath):
    inputs_dir = os.path.join(currentDir, "static/inputs/")
    results_dir = os.path.join(currentDir, "static/results/")
    masks_dir = os.path.join(currentDir, "static/masks/")
    # convert string of image data to uint8
    with open(imagePath, "rb") as image:
        f = image.read()
        img = bytearray(f)
    nparr = np.frombuffer(img, np.uint8)
    if len(nparr) == 0:
        return "---Empty image---"
    # decode image
    try:
        img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
    except:
        # build a response dict to send back to client
        return "---Empty image---"
    # save image to inputs
    unique_filename = str(uuid.uuid4())
    cv2.imwrite(inputs_dir + unique_filename + ".jpg", img)
    # processing
    image = transform.resize(img, (320, 320), mode="constant")
    tmpImg = np.zeros((image.shape[0], image.shape[1], 3))
    tmpImg[:, :, 0] = (image[:, :, 0] - 0.485) / 0.229
    tmpImg[:, :, 1] = (image[:, :, 1] - 0.456) / 0.224
    tmpImg[:, :, 2] = (image[:, :, 2] - 0.406) / 0.225
    tmpImg = tmpImg.transpose((2, 0, 1))
    tmpImg = np.expand_dims(tmpImg, 0)
    image = torch.from_numpy(tmpImg)
    image = image.type(torch.FloatTensor)
    image = Variable(image)
    d1, d2, d3, d4, d5, d6, d7 = net(image)
    pred = d1[:, 0, :, :]
    ma = torch.max(pred)
    mi = torch.min(pred)
    dn = (pred - mi) / (ma - mi)
    pred = dn
    save_output(
        inputs_dir + unique_filename + ".jpg",
        unique_filename + ".png",
        pred,
        results_dir,
        "image",
    )
    save_output(
        inputs_dir + unique_filename + ".jpg",
        unique_filename + ".png",
        pred,
        masks_dir,
        "mask",
    )
    return "---Success---"

# ------- Load Trained Model --------
print("---Loading Model---")
model_name = "u2net"
model_dir = os.path.join(currentDir, "saved_models", model_name, model_name + ".pth")
net = U2NET(3, 1)
if torch.cuda.is_available():
    net.load_state_dict(torch.load(model_dir))
    net.cuda()
else:
    net.load_state_dict(torch.load(model_dir, map_location="cpu"))
# ------- Load Trained Model --------
print("---Removing Background...")
# ------- Call The removeBg Function --------
imgPath = "Image_File_Path"  # Change this to your image path
print(removeBg(imgPath))
```

Scroll down to the end of the script and add your desired image’s path to `imgPath` and run the code in the terminal by typing `python __init__.py`.

For example, I'll use the following image of a car.

![Sample image with background](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/test-image.jpg) 

 I'll add its path to `imgPath` test our code.

![Adding image’s path](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/image-path.jpg)

Now, run the code in the terminal by running `python __init__.py`.
 
![Running the code in terminal](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/run-script.png) 

As a result, it will create the following image inside the project folder.

![Resulting image with background removed](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/result-image.png)
 
Awesome! Our code is working fine. For comparison, we can try the same image in other tools. The results will be pretty similar. 

## Coding the API

You can make a few simple changes to the code to turn it into a  sellable API! Here’s what the code will look like after making the changes.

```python
import torch
import torch.nn as nn
import torch.optim as optim
import numpy as np
import cv2
import uuid
import os

from model import U2NET
from torch.autograd import Variable
from skimage import io, transform
from PIL import Image

from fastapi import FastAPI, File, UploadFile
from fastapi.responses import JSONResponse

app = FastAPI()

# Get The Current Directory
currentDir = os.path.dirname(__file__)

# Functions:
# Save Results

def save_output(image_name, output_name, pred, d_dir, type):
    predict = pred
    predict = predict.squeeze()
    predict_np = predict.cpu().data.numpy()
    im = Image.fromarray(predict_np * 255).convert("RGB")
    image = io.imread(image_name)
    imo = im.resize((image.shape[1], image.shape[0]))
    pb_np = np.array(imo)
    if type == "image":
        # Make and apply mask
        mask = pb_np[:, :, 0]
        mask = np.expand_dims(mask, axis=2)
        imo = np.concatenate((image, mask), axis=2)
        imo = Image.fromarray(imo, "RGBA")

    imo.save(d_dir + output_name)

# Remove Background From Image (Generate Mask, and Final Results)

@app.get("/removeBG/")
async def removeBG(image_file: str):

    # ------- Load Trained Model --------
    print("---Loading Model---")
    model_name = "u2net"
    model_dir = os.path.join(
        currentDir, "saved_models", model_name, model_name + ".pth"
    )
    net = U2NET(3, 1)
    if torch.cuda.is_available():
        net.load_state_dict(torch.load(model_dir))
        net.cuda()
    else:
        net.load_state_dict(torch.load(model_dir, map_location="cpu"))
    # ------- Load Trained Model --------

    inputs_dir = os.path.join(currentDir, "static/inputs/")
    results_dir = os.path.join(currentDir, "static/results/")
    masks_dir = os.path.join(currentDir, "static/masks/")

    # convert string of image data to uint8
    with open(image_file, "rb") as image:
        f = image.read()
        img = bytearray(f)

    nparr = np.frombuffer(img, np.uint8)

    if len(nparr) == 0:
        return "---Empty image---"

    # decode image
    try:
        img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
    except:
        # build a response dict to send back to client
        return "---Empty image---"

    # save image to inputs
    unique_filename = str(uuid.uuid4())
    cv2.imwrite(inputs_dir + unique_filename + ".jpg", img)

    # processing
    image = transform.resize(img, (320, 320), mode="constant")

    tmpImg = np.zeros((image.shape[0], image.shape[1], 3))

    tmpImg[:, :, 0] = (image[:, :, 0] - 0.485) / 0.229
    tmpImg[:, :, 1] = (image[:, :, 1] - 0.456) / 0.224
    tmpImg[:, :, 2] = (image[:, :, 2] - 0.406) / 0.225

    tmpImg = tmpImg.transpose((2, 0, 1))
    tmpImg = np.expand_dims(tmpImg, 0)
    image = torch.from_numpy(tmpImg)

    image = image.type(torch.FloatTensor)
    image = Variable(image)

    d1, d2, d3, d4, d5, d6, d7 = net(image)
    pred = d1[:, 0, :, :]
    ma = torch.max(pred)
    mi = torch.min(pred)
    dn = (pred - mi) / (ma - mi)
    pred = dn

    save_output(
        inputs_dir + unique_filename + ".jpg",
        unique_filename + ".png",
        pred,
        results_dir,
        "image",
    )
    save_output(
        inputs_dir + unique_filename + ".jpg",
        unique_filename + ".png",
        pred,
        masks_dir,
        "mask",
    )
    return "---Success---"


# print("---Removing Background...")
# ------- Call The removeBg Function --------
# imgPath = "1.jpg"  # Change this to your image path
# print(removeBg(imgPath))
```

So, now you can deploy this on a server like [Heroku](https://www.heroku.com/), and voila! Your very own API is ready to be sold on API marketplaces.

## Sell on Rapid API Hub

The best place to sell your API is the [Rapid API Hub](https://rapidapi.com/hub), the largest API directory in the world, where you can list your APIs and sell access to users who want to use them. 

![RapidAPI Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-1.png)

With different plans available, you can control how you monetize your creation and turn it into a lucrative business opportunity.

<Callout
	linkText="Sign up"
	linkHref="https://rapidapi.com/auth/sign-up"
	type="modern"
	title="Explore and Sell APIs"
>
	Explore the single place to find APIs for your projects and publish your own APIs in front of millions of developers.
</Callout>

## Wrap up

In summary, this course presents an incredible opportunity to create and sell an API that removes backgrounds from images. The process is simple, quick, and, most importantly, profitable! So, what are you waiting for? Get started today and let your creativity flow while making a handsome income!

Omar I.

Intro

Important!

The idea

What this website does

How much traffic

What did I do?

How does the script work?

Example

Comparing results

How to make money?

James Q Quick

Mashhood A.

What we'll build

What is Rapid API?

Resources

Database setup

Create a Next.js project with TypeScript

Setup Prisma with Next.js

Configuring Prisma

Database schema

Seed the database

Scaffolding Next.js endpoints

Testing API with Rapid VSCode Client

Prisma client setup

Integrating Prisma in Next.js API endpoint

Add query parameters and validation to API endpoint

Add config parameters to Prisma Query

Dynamic API route in Next.js

Create new GitHub repository

Deploy and host in Vercel

Multiple builds in Vercel

Publishing API to RapidAPI

Define endpoints in RapidAPI

Monetizing your API in RapidAPI

Wrap Up

RapidAPI Client VS Code Extension Intro

Xata database intro

GitHub repository

Setup Node.js project with TypeScript

Installing types for Node

Scaffolding an express application

Creating CRUD requests in RapidAPI Client Extension

Test CRUD requests in RapidAPI Client Extension

Setup database in Xata

Xata code generation with TypeScript

Using Xata in our Express.js CRUD endpoints

Wrap up

Ania Kubów

We will also learn how to sync this API with the [RapidAPI Hub](https://rapidapi.com/hub) and [RapidAPI Studio](https://rapidapi.com/studio?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) 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](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client&ssr=false#overview). 

![RapidAPI Client for VS Code](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/RapidAPI-Client-for-VS-Code.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Installing-RapidAPI-Client.png)

## 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](https://rapidapi.com/auth/sign-up?referral=/hub). Please create an account if you haven't already.

![RapidAPI Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/RapidAPI-Hub-1.png)

After logging into RapidAPI Hub, we can also access [RapidAPI Studio](https://rapidapi.com/studio?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). As soon as you launch the RapidAPI Studio, you will see a dashboard containing your various projects.

![RapidAPI Studio](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/RapidAPI-Studio.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Creating-a-new-project-on-RapidAPI.png)

## 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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Leveraging-REST-Countries.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Creating-new-request.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Selecting-request-snippet-in-node.js_.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Synchronizing-to-RapidAPI-Studio.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Sending-response-in-node.jsfetch-package.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Previewing-DataStax.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Developing-a-database-on-DataStax.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Filling-out-indormation-on-DataStax.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Database-credentials.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Vieiwng-your-database-on-dashboard.png)

## 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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Connecting-with-API.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Document-list-on-Swagger-API.png)

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"
}
```

![Creating an object](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Creating-an-object.png)

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.

![Filling out information in GET document](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Filling-out-information-in-GET-document.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Starting-a-new-request-on-VS-Code.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Syncing-and-copying-the-code.png)

## 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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Copying-document-ID-for-new-request.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Filling-and-sending-out-API-request.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Uploading-information-on-Hub-Listing.png)

## 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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Saving-information-on-Hub-Listing.png)

## 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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Creating-Endpoint.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Creating-additional-Endpoint.png)

## 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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Selecting-Basic-plan-for-monetization.png)

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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/resturants-API-on-RapidAPI-platform.png)

## 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](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Testing-the-Endpoint.png)

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.



Introduction

The RapidAPI VSCode extension

Building the API

Creating the requests

Publishing the API

JavaScript Mastery

Setup

Discover Section

RapidAPI Music Fetching

Loader Component

Error Component

Song Card Component

Play/Pause Functionality

Sidebar

Top Play Section

Top Chart Card 

Top Artist - Swiper Component

Song Details Page

Artist Details Page

Around You, Top Charts & Artists

Search

Deployment

Harry

Along with it, [RapidAPI Client](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client), the VS Code extension, was also launched. Many features in this extension are not present in any HTTP Clients, including Postman, Insomnia, etc.

<Callout
    title="Rapid's API Client VS Code Extension"
    linkText="Check out Rapid API Client"
    linkHref="https://rapidapi.com/products/vs-code-rapidapi-client/"
>
With Rapid's API Client in VS Code, developers use the same simplified workflow across their API journey. Organizations accelerate API delivery while providing developers with a streamlined and more efficient coding experience.
</Callout>

It is very easy to install RapidAPI Client for VS Code.

## Step 1

Open your Visual Studio Code Editor and click on the Extension's icon on the VS Code sidebar to open the Extension’s marketplace. You can also press `CMD` + `SHIFT` + `X` to open it if you are on Mac. For Windows, it will be `CTRL` + `SHIFT` + `X`. After that, type RapidAPI Client in the search bar.

![RapidAPI Client in Search Bar](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/RapidAPI-Client-in-Search-Bar.png)

## Step 2

Now click on the install button. It will take a moment; afterward, you will see the RapidAPI icon in your VS Code sidebar, and you’re done.

![RapidAPI Client icon on VS Code](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/RapidAPI-Client-icon-on-VS-Code.png)

## RapidAPI Client VS Other HTTP Clients

- While testing APIs, we often have to leave VS Code and head over to other API Clients. This jumping between programs wastes time. With RapidAPI Client Extension, you can test APIs quickly without leaving VS Code and call APIs using a dedicated tab.
- This extension makes testing local and online APIs inside VS Code easy and simple. 
- Now you don’t have to worry about changing the theme of your VS Code editor for this extension to work correctly. RapidAPI Client supports and adapts its design to your VS Code theme.
- The environment variables option lets you add your secret keys without worrying about compromising security.
- With this extension, you can generate code snippets in multiple languages.
- This extension lets you automatically generate types and interfaces in Python, TypeScript, Swift, etc.


## Wrap up

[RapidAPI Client](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client) is a VS Code extension that is now available for you to use. Go ahead, install it, and start testing your APIs right inside your code editor. If you want to learn more about it, we have also written a complete guide about it that you can find [here](https://rapidapi.com/guides/a-deep-dive-into-rapidapi-client-for-vs-code).



Manage environments

Test API using RapidAPI Client

API description

Generate API call snippet

VS Code theme support

API response type generation

Create API request from clipboard

Use environment variables

Sync projects with cloud

Tomi Tokko

RapidAPI just recently made their brand new VS Code addon and their RapidAPI studio available to the public. You can accomplish several things with the VS Code add-on, including:

- Testing APIs From VS Code
- Code and Type Generation
- VS Code Theme Support 

Let's get started with it right away.

## Installing RapidAPI Client VS Code Extension

This is the interface for VS Code, and the very first thing we want to do is install an extension for VS Code called [RapidAPI Client](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client&ssr=false). 

<Callout
    title="Rapid's API Client VS Code Extension"
    linkText="Check out Rapid API Client"
    linkHref="https://rapidapi.com/products/vs-code-rapidapi-client/"
>
With Rapid's API Client in VS Code, developers use the same simplified workflow across their API journey. Organizations accelerate API delivery while providing developers with a streamlined and more efficient coding experience.
</Callout>

![VS Code Interface](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/VS-Code-Interface.png)

The first thing to do is to come to your extension step. Here, search for RapidAPI Client.

You should find it while looking. Click install once there. Installation won't take 10 seconds. On the same page, you can read about this extension and what you can do with it.

![RapidAPI Client Extension](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/RapidAPI-Client-Extension.png)

The RapidAPI icon should appear as a small icon on the left once this has been accomplished. You can notice that the RapidAPI client extension has been successfully installed after you click on that and open this section. 

![Installing RapidAPI Client Extension](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Installing-RapidAPI-Client-Extension.png)

Now that the VS Code extension has been installed, let's begin the testing. I'll demonstrate what this extension can do.

## Demo API

To make things more apparent, I am using a demo API, which you can access via the link ([https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)). It has some response, so we can test the RapidAPI extension with this.

![Demo API](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Demo-API.png)

### Creating Request 

First, I will copy the URL to the clipboard, and then I can create a new request in VS Code using the URL copied to the clipboard. Let me demonstrate what that means. 

Open your command palette once more, and if you search for RapidAPI, you will notice that it says *Create New Request from Clipboard*.

![Create new request from clipboard](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Create-new-request-from-clipboard.png)

Once I click that, the link I copied is pasted into the GET search field, and if I delete the *https* prefix from the URL before sending, I get a swift response. Therefore, that is one use that we can make of this.

![Getting response](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Getting-response.png)

Multiple requests are also possible, so let's paste the same link into the GET search bar again. When you click send, you will observe that the response is presented in JSON format. The response is also available in *Text* format, although *JSON Text* is easier to comprehend.

![Getting multiple responses](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Getting-multiple-response.png)

### Exploring Code Snippets

Additionally, we can generate a code snippet for our response. We may also change it to other programming languages, such as Python, and obtain a code snippet that we can copy immediately or open in a new window using the adjacent icons.

### Theme-hunting in Visual Studio Code

VS Code allows us to alter its theme to suit our preferences. Now, let's open up the command palette and switch to a solarized theme. All of the transitions between colors and other elements are flawless. 

![Exploring for different theme](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Searching-for-different-theme.png)

## Creating a Python project

Now, our objective is to create a new Python project. Using FastAPI, we will construct an API-based project. We will only use it to test the RapidAPI extension and the new RapidAPI version. Therefore, let's jump right into it.

First, you should ensure that FastAPI has been installed. Simply open your command prompt and run the following command there: 

```sh
pip install fastapi
```

It's that simple. After that, let's start coding in simple steps.

### Step 1 

Let’s create a new file called `apiapp.py`. Now, to use FastAPI, all I need to do is write:

```py
from fastapi import FastAPI
```

### Step 2 

As soon as the import is complete, I'll start the FastAPI process, and then I'll write:

```py
from fastapi import FastAPI

app = FastAPI()
```

### Step 3

I will now refer to this API as the **richest people in the world**. So we can just create a new Python dictionary stating:

```py
from fastapi import FastAPI

app = FastAPI()

richest_people =  {
}
```

### Step 4

We can now define wealthy persons and their presumed net worth as follows:

```py
from fastapi import FastAPI

app = FastAPI()

richest_people =  {
	"Elon Musk": "280 Billion USD",
	"Jeff Bezos": "250 Billion USD",
	"Bill Gates": "190 Billion USD",
	"Mark Zukerberg": "150 Billion USD",
}
```

### Step 5

Now it's time to set up our very first endpoint. We could just write:

```py
from fastapi import FastAPI

app = FastAPI()

richest_people =  {
	"Elon Musk": "280 Billion USD",
	"Jeff Bezos": "250 Billion USD",
	"Bill Gates": "190 Billion USD",
	"Mark Zukerberg": "150 Billion USD",
}

@app.get("/richest-people")
```

If you haven't worked with FastAPI before, what I'm doing is basically leveraging a class function that I began in FastAPI and using it to build a new endpoint. 

### Step 6 

Let's create a new function that defines richest people. Whatever is done in this function is the response that's meant to be given to the user. We can simply write it as:

```py
from fastapi import FastAPI

app = FastAPI()

richest_people =  {
	"Elon Musk": "280 Billion USD",
	"Jeff Bezos": "250 Billion USD",
	"Bill Gates": "190 Billion USD",
	"Mark Zukerberg": "150 Billion USD",
}

@app.get("/richest-people")
def richest_people():
	return richest_people
```

### Step 7 

It's that easy, and we can implement API pretty rapidly. Now, let's save and test this file. Simply launching our command prompt or terminal is all that is required. It is important to ensure that it is in the same directory as this file. Let's type this in the terminal:

 ```sh
ls
```

After that, we can simply write that:

 ```sh
uvicorn apiapp:app - reload
```

If you don’t have `uvicorn` installed, you can do it by running the following command in the terminal:

```sh
pip install uvicorn
```

This application is essentially the name of the variable employed here. Thus, you will notice that it provides the local port: `https://127.0.0.1:8000`, where our project is successfully running.

### Step 8

Next, return to your browser and paste the following link: `https://127.0.0.1:8000/richest-people`. You will observe that it returns a blank response. It is due to a name convention conflict in our code, as a function and the dictionary share the same name. So let's just change that and write:

```py
from fastapi import FastAPI

app = FastAPI()

richest_people_list =  {
	"Elon Musk": "280 Billion USD",
	"Jeff Bezos": "250 Billion USD",
	"Bill Gates": "190 Billion USD",
	"Mark Zukerberg": "150 Billion USD",
}

@app.get("/richest-people")
def richest_people():
	return richest_people
```

So, once we've completed this, we'll save it. Let's go back and refresh our response. You'll see now that we have our response. 

###  Step 9

The subsequent step is to launch your API application on the web. Heroku will be used for this. Create a new file titled Procfile and save this in the same folder as the API app. 

![Creating new file](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Creating-new-file.png)

###  Step 10

The next step is to copy and save the following code into the Procfile:

```
web: gunicorn -w 4 -k  uvicorn.workers.UvicornWorker apiapp:app
```

Following that, we need to add the `requirement.txt` file. We can compose in the terminal as:

```sh
pip3 freeze > requirements.txt
```

### Step 11

The following step is to push this to GitHub. Instead of deploying with the Heroku CLI, we will deploy directly with Heorku because it is faster. Therefore, we only need to create a new repository.

![Heroku Interface](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Heroku-Interface-1.png)

You can give it the name `richest-people-api`, make it public, and create the repository.

![Creating new repository on Heroku](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Creating-new-repository-on-Heroku.png)

### Step 12

Since the previous step has been completed, the next step is to publish it to GitHub. We can create a local new repository by typing:

```sh
git init
git commit -m "first commit"
git branch -M main
git remote add origin [repo_url]
git push -u origin main
```

After you have completed this step, it will prompt you to sign in so that it can obtain authorization to reopen Visual Studio Code.

![Getting authorization to open on VS Code](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Getting-authorization-to-open-on-VS-Code.png)

Let's refresh our browser and you will see that we will find all the files successfully.

![Locating files in Heroku](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Locating-files-in-Heroku.png)

### Step 13

The next step you need to do is get into your Heroku account and set up a new application by giving it *App name* and clicking on *Create app*.

![Setting up new application](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Setting-up-new-application.png)

Now the app has been successfully developed. This is how we can deploy using the Heroku CLI, but for the purposes of this guide, we will use GitHub. You can connect it to GitHub and provide it with the repository's name. You can give it the same name *richest-people-api* and search it with that name.

![GitHub as deployment method](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/GitHub-as-deployment-method.png)

Let's enable automatic deploys, select main in the branch, and then simply deploy it. You will see that it is deployed successfully to Heroku. 

![Deploying application on Heroku](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Deploying-application-on-Heroku.png)

Let's proceed and select view. The link (https://richestpeopleapi.herokuapp.com) is then opened in the browser. You will notice that it states that the details are not found since the response is  not defined. 

Now, open this link (https://richestpeopleapi.herokuapp.com/richest-people) and view the response that is returned.

![Navigating link to get response](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Navigating-link-to-get-response.png)

### Step 14

Let me show you another feature that the RapidAPI extension here. We can add the link to the API endpoint. We can simply write: 

```py
from fastapi import FastAPI

app = FastAPI()

richest_people_list =  {
	"Elon Musk": "280 Billion USD",
	"Jeff Bezos": "250 Billion USD",
	"Bill Gates": "190 Billion USD",
	"Mark Zukerberg": "150 Billion USD",
}

@app.get("/richest-people")
def richest_people():
	return richest_people

api_endpoint_url = https://richestpeopleapi.herokuapp.com/richest-people
```

An interesting feature of RapidAPI VS Code Extension is that, if you click on that link you will see that an option appears *RapidAPI: Create new request*. 

![Using RapidAPI to create new request on VS Code](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Using-RapidAPI-to-create-new-request-on-VS-Code.png)

So once we click on that, it just creates new requests in VS Code. Click send, and you'll see the response that is needed. 

![Creating new response from toolbar option](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Creating-new-response-from-toolbar-option.png)

Now that everything has been successfully created, we have been able to construct our API using FastAPI. We were also able to install and test the RapidAPI VS Code extension.

## Deploying on RapidAPI Hub

Let's simply upload the API we just deployed to [RapidAPI Hub](https://RapidAPI.com/auth/sign-up). RapidAPI hub is essentially an API Hub with thousands of APIs. You can find a variety of APIs by searching them, and you can use them for various purposes. 

As developers, we can easily integrate our APIs into this platform. First, you must signup. So allow me to briefly explain how to accomplish this.

### Create new API Project

The first step is to open [RapidAPI Studio](https://rapidapi.com/studio?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) and select Add API project, then call it *Richest people*. You can write *Return top 4 richest people in the world* in the *Description* field. You can pick *Data* under *Category*. To create a project for us, click Add API Project.

![Creating new API Project on RapidAPI](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Creating-new-API-Project-on-RapidAPI.png)

After that, you can click on Hub Listing and fill in this form quickly. We just have to make sure that the API visibility is public. 

![Making API publicly visible](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Making-API-publicly-visible.png)

Once we know that it's public, we have to add the Base URL. The Base URL is the link without the endpoint i.e., *https://richestpeopleapi.herokuapp.com*. We will paste this link to the Base URL and click save.   

### Adding Endpoint

The endpoint will be added next. Click *Create Rest Endpoint* and call it *Richest people*. In *Description*, write *Returns a list of the richest people*. Additionally, the `/richest-people` endpoint must be specified. After that, click the save button.

![Creating Rest Endpoint](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Creating-Rest-Endpoint.png)

We can now view this by clicking the "View in Hub" button in the upper-right corner. Once you click on that, the RapidAPI platform will open, displaying the API documentation, endpoint, and code snippets, among many other things.

![Richest people API documentation](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Richest-people-API-documentation.png)

### Test Endpoint

Let's click *Test Endpoint* to test it, and it will provide you with all of the data you need to specify in our code. Everything is working successfully.

![Testing Endpoint](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/10/Testing-Endpoint.png)

## Wrap up

It has been a smooth and efficient API-building approach. This guide's primary objective was to demonstrate how to use the RapidAPI VS Code extension. It is beneficial to developers since it allows them to test their APIs by just clicking on the extension and initiating a new request with the RapidAPI VS Code extension.

This is the perfect platform for you if you want to create an API and make it public. I hope you understood all we covered in this guide, and I hope you enjoyed reading it.



