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

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.

VS Code Interface

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

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

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). It has some response, so we can test the RapidAPI extension with this.

Demo API

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

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

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

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

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
Copy
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
Copy
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
Copy
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
Copy
from fastapi import FastAPI
app = FastAPI()
richest_people =  {
}

Step 4

We can now define wealthy persons and their presumed net worth as follows:

py
Copy
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
Copy
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
Copy
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
Copy
ls

After that, we can simply write that:

sh
Copy
uvicorn apiapp:app - reload

If you don’t have uvicorn installed, you can do it by running the following command in the terminal:

sh
Copy
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
Copy
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

Step 10

The next step is to copy and save the following code into the Procfile:

Copy
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
Copy
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

You can give it the name richest-people-api, make it public, and create the repository.

Creating new repository on Heroku

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
Copy
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

Let's refresh our browser and you will see that we will find all the files successfully.

Locating files in Heroku

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

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

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

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

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
Copy
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

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

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

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

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

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

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

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.