How To Create An API With Rowy & Firebase (2023): Basic Features & Testing With Low-Code

APIs represent 80% of all Internet traffic: understanding how they work and how to build your own is fundamental to create your own software.

An application programming interface allows different software systems to interact with one another. In a web context, APIs are built on top of the HTTP protocol and they allow you to read, create, and update information stored in a database. In other words, you use one on a daily basis.

But APIs are useful for much more than just retrieving data. They can also be used to connect different services together, allowing you to automate tasks and build integrations between different software products. As an API developer, you can also monetize APIs by offering unique features and data. Stripe, for example, is one of the most popular APIs for developers to accept online payments.

You don't even need to know how to code and manage servers to build one nowadays. One such platform is Rowy, a spreadsheet-like database that generates a usable API without code. In this article, we'll take a closer look at how to use Rowy as a Firebase CMS to build your own API, using your own data, and how to consume it in a React app.

How To Build Your Own API With Low-Code

In this tutorial, we'll be using Rowy to build an API that provides nutritional data―name, calories, and even associated emojis. We'll be using Rowy to organize our data and the Firebase API in a React app to display the data in our database.

1. Create a data source

An API is valuable because of the data it provides, so the first step in building your own API is to have a data source. A data source can be anything from a hand-made spreadsheet to an existing database, but for the purposes of this tutorial, we'll be using a dataset found on Kaggle. You can find plenty of open datasets online covering a wide range of topics, from sports to politics. Kaggle is a great place to start:

All datasets are available as CSV files. A CSV file can be imported in a spreadsheet, so we can use Google Sheets to check what's inside the CSV file and decide which parts are interesting to us―a step also known as data cleaning:

Once you've decided what data you want to use, you can download the CSV file and use it to create a new table in Rowy that we will use as an API data source.

2. Create relevant columns

Create a new Rowy project and add a new table. We'll call it api-creator.

You'll need an account. If you don't have one, you can sign up for free or self-host a Rowy instance yourself. It only takes a few minutes to get started.

Once you're logged in, you can create columns to match the data in the CSV file:

• a name - a short string field
• emoji - another short string field
• calories, protein, carbs, fat - all number fields

Your table will look like this:

Next, we need to fill up the empty table with the data we found on Kaggle.

3. Import data

You can upload any CSV file in Rowy to import the data it contains into your database. In this case, we'll use the CSV file we created in step 1, but you can also import from an Airtable spreadsheet:

Once uploaded, you can map the columns in your CSV file to the columns in your table. This will ensure that the data is imported correctly into your database:

The final result will look like this:

At this point, you have a full-blown database with the data you need for your API. You can now use the Firebase API to access the data in your database and manage it as needed.

4. Use the Firebase API

Rowy is a CMS for Firebase, so you can directly use the Firebase API to display the data in your food database. In the following code, we use the Firebase configuration found in the Firebase Console to connect to the database. Then, we use the database connection instance to fetch the data from the api-creator table:

import { initializeApp } from "firebase/app"

import { 
    getFirestore,
    getDocs,
    collection
} from "firebase/firestore"

const firebaseConfig = YOUR_FIREBASE_CONFIG

const app = initializeApp(firebaseConfig)

const db = getFirestore(app)

export function getData(){
    const doc_refs = await getDocs(collection(db, 'api-creator''))

    const res = []

    doc_refs.forEach(todo => {
        res.push({
            id: todo.id, 
            ...todo.data()
        })
    })

    return res
}

We can use this function in any Javascript program. For the sake of simplicity, we'll create a new React app to test the API:

npx create-react-app my-app

Now, you can call the Firebase API in your React app when the component mounts for the first time. We'll use the useEffect hook to fetch the data from the API and store it in the component's state to display it in the UI:

import data from './data.json';

import React, { useState, useEffect } from 'react';

function App() {

    const [data, setData] = useState([]);

    useEffect(async () => {
        const res = await getData()
        setData(res)
    }, []);

    return (
        <div className="App">
            { data && data.length > 0 && 
                <ul>
                {data.map((item) => (
                    <li key={item.id}>
                    <h3>{item.emoji} {item.name} ({item.caloriesKcal} kcal)</h3>
                    </li>
                ))}
                </ul>
            }
        </div>
    );
}

export default App;

Your API data is now available in your React app:

Make sure to check out our article on querying Firestore data with React for more complex use cases!

Check Out More Demos

Using a low-code platform like Firebase, you can easily build your own API and connect different services or databases together. The process is simple: first, create a data source from scratch or put data together from different places. Next, add columns to your Rowy database to match the data in the source and import the data. Finally, just use the Firebase API to access the data as needed in your app.

Overall, APIs are a crucial part of modern software development, enabling different systems to communicate and exchange data with each other. Whether you're a seasoned developer or just starting out, building your own API with a low-code platform like Rowy can be a great way to improve your skills and add functionality to your projects. Be sure to check out more demos and resources to learn more about how to augment your database with custom code and third-party tools like OpenAI, Webflow, or even Airtable.