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

Rapid API Courses

Ania Kubów

The guide is tailored for beginners aiming to make money with their coding skills. We will build an API on Climate Changes using Express, Axios, and Cheerio packages. I will also show you how to list your API on the largest API hub-Rapid API, and monetize it.

## Prerequisites

For this guide, only a basic understanding of JavaScript is required. However, even if you don't have your command over JavaScript, follow along anyway because there won't be a lot of code involved. Before we start, ensure you have Node.js installed on your machine.

## What is an API?

API stands for Application Programming Interface. APIs allow the technologies to talk with each other and are essential to many services we rely on. They grab and shape information and pass it from one technology to another.

As a developer, you can use TikTok's APIs to get a live TikTok feed onto your website or even use them in a two-way stream to get, post or delete data from a movie system. To summarize, APIs are everywhere today.

## RapidAPI Hub

After building our API, we will list it on the [RapidAPI](https://rapidapi.com/hub) Hub. As a developer, when you launch your API on the Rapid API platform, you can essentially sell its access to those who want to utilize what you have made. This access comes in different plans you can choose from, allowing you to control how you monetize what you have built. 

As it is the largest hub for APIs out there at this moment in time, the footfall will be in our favor, meaning that you could take your API idea from a simple form of passive income to a full-blown startup, depending on how much time you want to dedicate to it.

What are we waiting for? Let's do it. 

## Step 1: Sign up on RapidAPI

Since we will be using the Rapid API platform, so let us go ahead and sign up. As I want to create my own API, I will click on “My APIs” and then leave it at this point.

![RapidAPI Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-1.png) 

## Step 2: Decide the topic for our API

For this guide, I have decided to build an API that would tell us climate change news from various publications worldwide. If you want to go for any other topic, like crypto, that is entirely up to you.

## Step 3: Create a new project on your code editor

I'm going to start off by creating a blank project using WebStorm. Feel free to use whatever code editor you wish and create an empty directory. So just like this, we can start entirely from scratch.

![Creating a new project in WebStorm](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/create-project.png)

## Step 4: Create Package.json file

As a general rule, any project that uses node js will need to have a `package.json` file. To create the file, we need to run the command `npm init` in our terminal, ensuring that we are in the directory we just created.

The command will spin up the file for us, and we will be prompted to answer a few questions like the name, version, and description of our package. It will also ask to choose the entry point, which we will keep the `index.js` file, and leave the rest of the questions blank.

![package.json file](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/package-json.png)

As you can see in the `climate-change-api` directory, a `package.json` file has been created with all the keys we were asked to fill out. Within this file, we will see all our installed packages.

## Step 5: Install the packages

We will install the [Cheerio](https://www.npmjs.com/package/cheerio), [Express](https://www.npmjs.com/package/express), and [Axios](https://www.npmjs.com/package/axios) packages for this guide. Run the following commands to install them:

`npm i cheerio`
`npm i express`
`npm i axios`

## Step 6: Create the index.js file

Within our Climate Change API directory, we will create a new JavaScript file and call it `index.js`. This will be our server, and we will write our code in it.

## Step 7: Define the PORT

We will start the coding by defining the port on which we will open our server. I am going to call it PORT 8000. This can be whatever you wish. 

![Defining the port](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/port.png)

## Step 8: Initiate our packages

To use our packages in the backend, we will type the standard syntax for each of our three packages.

```js
const express = require('express')
const axios = require('axios')
const cheerio = require('cheerio')
```

To initiate express, we will call the express function and save it in the 'app' variable. Then we will make this 'app' to listen to our port to run the server. 

```js
const app = express();
app.Listen(PORT, () => console.log('server running on PORT ${PORT }'));
```

I'll also need to write a `start` command in the `script` in package.json file and use `nodemon` to listen to any changes made in the `index.js` file. 

![Using nodemon](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/nodemon.png)

To run our backend, I'll type the command `npm run start` in our terminal.
We will make express, i.e., `app` listen to the homepage path and create a response.

```js
app.get('/', (req, res) => {
	res.json('Welcome to my Climate Change News API');
});
```
Here you can see it is working perfectly.

![API working on local host](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/local.png)

## Step 9: Getting a news source

Now let us start scraping data from a news source, let's say, The Guardian. Axios and cheerios will be utilized for this purpose. First, I'll use Axios to grab all the HTML from the [Guardian webpage](https://www.theguardian.com/environment/climate-crisis). Then using Cheerio, we will look for the elements. We will look for all the `< a` tags containing the word climate. We will grab the text of those tags and save it as the title. Also, we will grab the `href` for each tag and save that as a URL.

```js
app.get('/news', (req, res) => {
	axios.get('https://www.theguardian.com/environment/climate-crisis').then(response => {
		const html = response.data;
		const $ = cheerio.load(html);
		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');
			articles.push({
				title,
				url,
			});
		});
	});
	res.json(articles);
}).catch(err => console.log(err));
```
Great! We have scraped the Guardian webpage.
You can install a JSON Viewer extension on your browser to make it readable. So with the extension, it is looking great.

![Scraped data with JSON viewer extension](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/scraped-data.png)

So every time we found an `< a` tag containing the word climate, we created a title and URL from its text and href to have an array full of titles and URLs from the Guardian. How cool is that!

## Step 10: Getting multiple news sources

Now that we have successfully scraped one website, let's scrape climate information from multiple sources to make our API more effective.
I'll start doing this by creating an array of the newspapers I want to scrape. I will keep three, but you can add as many as you want.

```js
const newspapers = [
	{
		name: 'cityam',
		address: 'https://www.cityam.com/london-must-become-a-world-leader-on-climate-change-action/',
	},
	{
		name: 'thetimes',
		address: 'https://www.thetimes.co.uk/environment/climate-change',
	},
	{
		name: 'guardian',
		address: 'https://www.theguardian.com/environment/climate-crisis',
	},
];
```

Then I'll basically loop the same code with all those newspapers as follows:

```js
const articles = [];
newspapers.forEach(newspaper => {
	axios.get(newspaper.address).then(response => {
		const html = response.data;
		const $ = cheerio.load(html);
		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');
			articles.push({ title, url, source: newspaper.name });
		});
	});
});
app.get('/', (req, res) => {
	res.json('Welcome to my Climate Change News API');
});
app.get('/news', (req, res) => {
	res.json(articles);
});
```

![Scraped data from multiple sources](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/scraped-data-multiple.png)

Perfect! You can see we are now getting data from all three sources. However, our URLs from the Telegraph still need to be completed. They lack a base, as seen in their page's source code.
 
![Inspecting the elements of Telegraph webpage](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/inspect-element.png)

This issue can be solved simply by adding a `base` function and passing the Telegraph through it.

```js
const newspapers = [
	{
		name: 'thetimes',
		address: 'https://www.thetimes.co.uk/environment/climate-change',
		base: '',
	},
	{
		name: 'guardian',
		address: 'https://www.theguardian.com/environment/climate-crisis',
		base: '',
	},
	{
		name: 'telegraph',
		address: 'https://www.telegraph.co.uk/climate-change',
		base: 'https://www.telegraph.co.uk',
	},
];

const articles = [];
newspapers.forEach(newspaper => {
	axios.get(newspaper.address).then(response => {
		const html = response.data;
		const $ = cheerio.load(html);
		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');
			articles.push({
				title,

				url: newspaper.base + url,
				source: newspaper.name,
			});
		});
	});
});
```

## Step 11: Getting an individual news source by parameter

Now I want my API to be able to get data from individual news sources separately. This can be done by adding a new `app.get` function. 

```js
const PORT = 8000;
const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const app = express();

const newspapers = [
	{
		name: 'thetimes',
		address: 'https://www.thetimes.co.uk/environment/climate-change',
		base: '',
	},
	{
		name: 'guardian',
		address: 'https://www.theguardian.com/environment/climate-crisis',
		base: '',
	},
	{
		name: 'telegraph',
		address: 'https://www.telegraph.co.uk/climate-change',
		base: 'https://www.telegraph.co.uk',
	},
];

const articles = [];

newspapers.forEach(newspaper => {
	axios.get(newspaper.address).then(response => {
		const html = response.data;
		const $ = cheerio.load(html);

		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');

			articles.push({
				title,
				url: newspaper.base + url,
				source: newspaper.name,
			});
		});
	});
});

app.get('/', (req, res) => {
	res.json('Welcome to my Climate Change News API');
});

app.get('/news', (req, res) => {
	res.json(articles);
});

app.get('/news/:newspaperId', (req, res) => {
	const newspaperId = req.params.newspaperId;

	const newspaperAddress = newspapers.filter(newspaper => newspaper.name == newspaperId)[0].address;
	const newspaperBase = newspapers.filter(newspaper => newspaper.name == newspaperId)[0].base;

	axios
		.get(newspaperAddress)
		.then(response => {
			const html = response.data;
			const $ = cheerio.load(html);
			const specificArticles = [];

			$('a:contains("climate")', html).each(function () {
				const title = $(this).text();
				const url = $(this).attr('href');
				specificArticles.push({
					title,
					url: newspaperBase + url,
					source: newspaperId,
				});
			});
			res.json(specificArticles);
		})
		.catch(err => console.log(err));
});

app.listen(PORT, () => console.log(`server running on PORT ${PORT}`));
```

## Step 12: Deploy the API to Heroku

To prepare our API for deploying on Heroku, we will need to run the command of `npm i nodemon`. Also, we will have to change the port options to use the deployed link if it is deployed, and use the local host port when running locally.

```js
const PORT = process.env.PORT || 8000
```

After that, we will sign up on [Heroku](https://www.heroku.com/) and create a new app.

![Heroku interface](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/heroku.png)

Once you create it, you will see instructions on the Heroku page. Follow all those instructions and run these commands successively. 

![Heroku instructions](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/heroku-instructions.png)

Once done, it will deploy our app on Heroku. Copy the URL of your Heroku deployment.

## Step 13: Create API on RapidAPI

We'll go back to our RapidAPI dashboard, give our API a brief description and add the base URL we just created. 

![Creating API on RapidAPI](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/create-api.png)

Next, I will add a couple of endpoints by clicking on the REST Endpoint.
 
![Adding Endpoints](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/endpoints.png)

After that, I'll choose the pricing for my API. Here I have multiple plans to choose from, starting from basic to mega.

![Plans and Pricing](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/pricing.png)

Lastly, we'll make our API public, and that's it! Our Climate Change API is live on RapidAPI.

![Our Climate Change API on RapidAPI Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/climate-change-api.png)

## Wrap Up

Following the same steps stated in this guide, you can build your own APIs and make money by selling them on the RapidAPI platform. Happy building!



Omar I.

Ahmad Bilal

Ahmad Awais

Introduction

Overview of the final product

Creating a RapidAPI account

Creating our Node.js project

Routing in Express

Getting a news source

Getting multiple news sources

Getting an individual news source by parameter

Refactoring and Prep for Deployment

Creating our API on RapidAPI

Deploying to Heroku

Adding our Endpoints to RapidAPI

Adding Pricing Plans

Publishing our API

Build and sell your own API

Oflutter

Intro

Creating the home page

Creating recipe cards

Integrating the API

Final look of the app

Create a Recipe List App using Flutter and API

JavaScript Mastery

React Native Crash Course

Setup

Home Screen

useFetch Hook (Integrating Rapid API)

Job Details Screen

Search Functionality

Deployment

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

ChatGPT Tutorials

In this guide, we will build an API capable of producing QR codes. We will do this using [ChatGPT](https://chat.openai.com/chat), a powerful AI tool developed by OpenAI. It can generate human-like responses to various inputs and even write code for us, making it ideal for this project. After making the API, we will sell it on [Rapid API Hub](https://rapidapi.com/hub).

![Rapid API Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-1.png)

Rapid is a platform that offers developers to deploy and sell their APIs on a subscription basis, with the potential to generate a substantial monthly recurring revenue stream. Without further ado, let's get started.

<Callout
    title="Build, sell and use APIs"
    linkText="Sign up"
    linkHref="https://rapidapi.com/auth/sign-up"
>
Explore thousands of APIs on Rapid API Hub, the biggest hub of APIs. You can also find ideas for your next API that you can build using ChatGPT. Happy building!
</Callout>

## Step 1: Coding with ChatGPT

Open [ChatGPT](https://chat.openai.com/chat) and put in the command to code a Python Flask API server. We must be clear and concise regarding the functionality of the API so that ChatGPT can generate the code precisely to our specifications. In this instance, we must specify that the API should accept a `GET` request with a URL in string format and convert it into a QR image code.

![Writing the prompt in ChatGPT](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/chatgpt.png)

Once ChatGPT has generated the code, copy and paste it into a code editor such as VSCode, saving it as a new file named `qr.py`.

![Pasting the code in VSCode](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/code.png)

## Step 2: Testing the Code on Local Server

Next, open your terminal and run the command `python qr.py`.
 
![Running the command in terminal](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/terminal-1.png)

This will initiate the server. To test the server, open the URL provided by ChatGPT.
 
![URL provided by ChatGPT](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/url.png)

When you open the URL, it will generate a QR code image like this:

![API returning the QR code image](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/qrcode.png)

Modifying the URL value will produce a new QR code, demonstrating that the API functions flawlessly.

## Step 3: Modifying the code to allow for downloadable QR codes

We can further enhance the functionality of our API by modifying the code to make the QR code images downloadable. So, prompt ChatGPT to rewrite the code to make the response image downloadable.

![ChatGPT rewriting the code](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/chatgpt-modify.png)

Replace the previous code with the new code in your VSCode and relaunch the API on the local server. With this update, the QR code will be automatically downloaded each time a new URL is entered.

![API returning auto-downloadable QR Code images](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/download-qrcode.png)

## Step 4: Deploying the API

Now that our API is ready, it is time to deploy it to the cloud. For this demonstration, I will be using [PythonAnywhere](https://www.pythonanywhere.com/), but you may use any other platform, such as Heroku, Google Cloud, or Amazon. After signing up, you will be directed to the dashboard. 

![pythonanywhere Dashboard](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/pyanywhere.png)

Click on "Open Web App" and create a new web application. Select Flask and choose the desired Python version.
 
![Creating new web app on pyhtonanywhere](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/new-web-app.png)

Scroll down and click "Go to directory" to access the `flask_app.py` file.
 
![Opening flask_app.py file](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/open-file.png)

Copy and paste the Python code from the VSCode into this file, then save it. Next, click "Web," reload the server, and open the API in a new tab. You may encounter an error at this point, but ignore it as it is simply because our application lacks the root URL.

![API opened in a new tab](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/api-tab.png)

Finally, copy the demo request query parameters from ChatGPT, which are `/qrcode?url=https://www.example.com/` and paste them into the address bar. This will download a QR code image, confirming our API is live and fully operational.

![API is auto-downloading QR code images](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/auto-download.png)

## Step 5: Selling on Rapid

The final step is to publish our API on Rapid. Open [Rapid API Studio](https://rapidapi.com/studio) and do a quick sign-up if you haven’t already.

![Creating a new API project on Rapid API Studio](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/studio.png)

Fill out the necessary details about your API and click on the "Hub Listing" section and provide additional information, including the base URL generated by PythonAnywhere.

![Filling in the API details](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/add-api-details.png)

![Putting in the base URL](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/base-url.png)

Next, add the endpoints and query parameters and save them.

![Adding endpoints and query parameters](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/endpoints-1.png)

Click on "View in Hub" to see your API’s page on the API Hub. Here, we can test the endpoint to ensure our API is functional. As you can see, it generates a QR code in response, indicating that our API works splendidly.

![Testing the API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-api.png)

Now, return to your Studio project and open the **Monetize** section. Here you can create pricing plans for your customers and adjust different usage quotas for each plan.

![Adding pricing plans for the API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/pricing-plans.png)

Fantastic! Our API is now live and operational; every time someone subscribes, we'll receive payment. Let's make some money with our awesome API!

## Wrap up

With ChatGPT, you can create highly efficient and potentially profitable APIs in no time. Don’t just stop at QR Codes. Think of any good API idea, roll up your sleeves, and start building using the same process.

<Callout
    title="Build, sell and use APIs"
    linkText="Sign up"
    linkHref="https://rapidapi.com/auth/sign-up"
>
Explore thousands of APIs on Rapid API Hub, the biggest hub of APIs. You can also find ideas for your next API that you can build using ChatGPT. Happy building!
</Callout>


How To Build a MEME CREATOR Mobile App with FLUTTER