Build your first custom API

Learn how to create your own database & your own custom API inside the Dittofi Design Studio.

In this section we are going to cover:

1. Data models

2. CRUD

3. API Generator

4. Using your auto generated API

Data models

Data models are used to store persistent data inside the backend of your Dittofi application. This might for example, be the location to store you "users" data such as email, passwords.

The data models inside the Dittofi Design Studio are a visual interface to an enterprise grade database that will underpin your app. The database we use is called as PostgreSQL.

To access the data models go to the tab, as shown below.

Once inside the tab, you can create a new data model by pressing (A) "+ Add Table" and (B) Giving a name &/or description to your data model.

Once your data model has been created, it displays as a grid where you can store data.

Inside this view, you're able to:

• Add & remove columns

• Add & remove rows

• Make edits to the data contained inside your table

Adding a column called "Username" to our "Users" data model

Adding a new record to our "Users" data model

Editing a field inside our "Users" data model

To delete a row of data from within your user, you can highlight the entire row & press the "Delete" key on your keyboard.

To remove or edit a column use the dropdown arrow.

CRUD

Once you've created a data model, you can let other people interact with your data model remotely by building your own list of API endpoints. If you're not familiar with what API endpoints are read Intro to APIs.

The most common functionality that most APIs will have are:

• Create a new record

• Fetch multiple records, or a single record

• Update existing records

• Delete existing records

This functionality is collectively known as CRUD which is an acronym for Create, Read, Update and Delete.

Dittofi comes with an API Generator that let's you automatically generate CRUD endpoints for each table that you create. This can give your app development a serious speed up since, using traditional methods, you'd need to write up the CRUD endpoints by hand.

Some examples of CRUD within app development are:

Read user data stored in a data model and display is on your frontend.

Sign up forms can be used to collect data, send the data to the backend and create new records inside your data models.

Editing a users profile settings.

Deleting a post on social media.

API Generator

To build a custom CRUD API for one of your data tables, Dittofi has developed an API Generator that let's you build out your CRUD API in just two clicks.

To see how this works, go to the data table that you want to generate CRUD functionality for.

Next, click on API Generator.

This brings up the following popup box.

From here you can choose if you want to auto generate an API to:

• Create one record

• Get one record

• Get all records

• Update one record

• Delete one record

After you've made your selection, press "Submit" to auto generate the API for that table.

Ditto Tip: Note, you can auto generate an API for any view that you have created (e.g. custom filtered, sorted grids & forms & gallery's). For a recap on what are views, check our Introduction to data models.

Using your auto generated API

When you auto generate your API, this automatically installs a set of Endpoints, Actions and Events that you can use. We will cover what are Actions and Events in the next lesson. For now, let's just take a look at where the endpoints for your auto generated API are and how you can use them.

Auto generated endpoints

The auto generated endpoints get created inside the Endpoints tab inside the Dittofi Design Studio. You can navigate to this page using the purple application tool bar.

Auto generated endpoints

If you look closely at the list of endpoints, you will see that each endpoint has a Name, Path and Request Method. This is exactly the same as we saw in the last tutorial when we connected to the JSONPlaceholder API, see below.

Each endpoint comes with a Name, Path and Request Method

Clicking on an endpoint, you can open up that endpoint to test it. Note, before you test the endpoint you need first to generate the code for the endpoint. To do this, click on the "Build code" button in the tool bar.

Next, if you click on the "Run" button inside your "Get all" endpoint, you will see the URL of your endpoint. This is exactly the same as the URLs that we connected to in the JSONPlaceholder API example in the previous session.

If you take this URL & copy it into a new browser window, you'll see the response from your endpoint.

You can take this URL & give it to anyone in the world & they would now be able to access a list of shoes from your database. So, we have just built a custom endpoint for your API.

Notice that the response is a long list of key value pairs. An easier way to view this response is back inside your endpoint.

This key value pair data format is referred to as JSON. It is one of the most commonly used data formats when working with APIs.

In the next section we are going to dig deeper into endpoints & learn more about to build entirely custom endpoints using Actions & Events.