Dittofi
  • Tutorials
    • Tutorial Index
    • Quick Start
    • Dittofi Essentials
      • Part 1: Frontend terms and concepts
      • Part 2: Backend terms and concepts
      • Part 3: Connecting frontend and backend
      • Part 4: Dittofi app structure
    • Dittofi App Design
      • 🏗️App architecture 101
      • ◼️Backend app development 101
      • 🟪Frontend app development 101
      • 🔰(optional) Web developer beginner series
  • Learn Frontend
    • 👨‍💻Getting Started
      • Welcome to Dittofi
      • Intro to the Dittofi Design Studio (Frontend)
    • 🟩Pages
    • 🟪Elements
      • Types
        • Button Element
        • Div Block Element
        • Form Block Element
        • Link Block Element
        • List Element
        • Modal Box Element
        • Tabs Element
        • Columns Element
        • Image Element
      • Partials
      • Prefabs
      • Custom
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟨Events
      • 🟨External
        • HTTP Request
        • Run Endpoint
      • 🟨Flow Control
        • Condition
        • Run Action
        • Loop
        • Sleep
      • 🟨Maths
        • Add
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟨Navigation
        • Open Page
      • 🟨Notifications
        • Alert
        • Confirm
      • 🟨Other
        • Copy To Clipboard
        • Run Custom
      • 🟨Text
        • Concat
        • Contains
        • Ends With
        • I Contains
        • I Ends With
        • I Starts With
        • LTrim
        • RTrim
        • Text To Upper
        • Text To Lower
        • Trim
        • Starts With
      • 🟨Variables
        • Set Field
        • Remove Field
      • Validate
    • 🟦CSS Layouts
      • Holy Grail Layout
      • Side Bar Layout
      • Sticky Footer Layout
      • Sticky Header Layout
      • CSS Frameworks
    • 🔲CSS Frameworks
    • Component Libraries
    • Meta Attributes
  • Learn Backend
    • 🖥️Getting Started
      • Intro to Data
      • Intro to APIs
      • Build your first custom API
      • Actions & Events
    • 🟫Back-End Actions
    • 🟩Custom Models
      • 🟩Attributes
        • Array
        • Checkbox
        • Custom Model
        • Collection (Custom Model)
        • Collection (System Custom Model)
        • Date
        • Datetime
        • File
        • Number
        • Number With Decimal
        • Json
        • Text
    • ◼️Data Models
      • Database Fundamentals
        • Database relationships
      • ◼️Columns
        • Attachment
        • Auto Increment
        • Checkbox
        • Date
        • Datetime
        • Duration
        • Email
        • Long text
        • Link to another record field
        • Number
        • Number with decimal
        • Password
        • Phone number
        • Percent
        • Price
        • Rating
        • Single select
        • Single line text
        • URL
    • 🟥Events
      • 🟦Arrays
        • Append
        • Array Pop
        • At
        • Length
        • Prepend
        • Range
      • 🟦Conversions
        • Base64 Encode
        • Base64 Decode
        • Json Decode
        • Json Encode
        • Path Escape
        • Path Unescape
        • Query Escape
        • Query String Parse
        • Query Unescape
        • To Bool
        • To Float
        • To Int
        • To Str
        • Yaml Encode
        • Yaml Decode
      • 🟦Database Requests
        • Create
        • Create Or Update
        • Delete
        • Has Record
        • Read Event
        • Update
      • 🟦External
        • HTTP Request
        • SFTP Download
        • SFTP Upload
      • 🟦Files
        • CSV Reader Event
        • CSV Writer Event
        • File Read
        • File Save
        • File Size
        • File Type
        • JSON Reader
        • PDF Generator
      • 🟦Flow Control
        • Condition
        • Loop
        • Return
        • Run Action
        • Sleep
      • 🟦Notifications
        • Send Mail
        • Connect Websocket
        • Message Websocket
      • 🟦Maths
        • Add
        • Acos
        • Acosh
        • Asin
        • Asinh
        • Atan
        • Atanh
        • Cbrt
        • Ceil
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟦Security
        • Compare Password
        • JWT Decode
        • JWT Encode
        • Login
        • Logout Web User
        • Password Generator
        • Random Number
      • 🟦Time
        • Add Time
        • Day
        • Format Time
        • Minute
        • Nanosecond
        • Parse Time
        • Second
        • Time In
        • Year
        • Year Day
      • 🟦Text
        • Concat
        • Contains
        • Ends With
        • Execute Template
        • I Contains
        • I Ends With
        • I Starts With
        • Starts With
        • LTrim
        • RTrim
        • Replace
        • Regex Find All String
        • Regex Find String
        • Regex Match String
        • Trim
        • Text To Lower
        • Text To Upper
        • Text To Title
        • Url Getarg
      • 🟦Other
        • Assign
        • Run Custom
        • Redirect Web Page Event
        • Render Web Template Event
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟪Webservices
  • Templates
    • Two sided marketplace template
      • Introduction
        • Part I: Installing and setting up the marketplace template
        • Part II: Understanding what features are included in the marketplace template
        • Part III: Customizing your marketplace frontend without coding
        • Exploring Dittofi's marketplace API
      • Listings
        • How to create a marketplace listing
    • How to build a CRUD app
  • Third Party APIs
    • OAuth 2.0 APIs
      • Introduction To OAuth 2.0
      • Google OAuth 2.0 - PART I
      • Google OAuth 2.0 - PART II
  • Dittofi Admin
    • Your Account
      • Workspace Admin
      • Manage Billing
      • Connect a custom domain
      • How to use a discount code to Dittofi Pro
  • FAQ
    • API Generator
    • How to write custom SQL?
    • Why does my image not display?
    • How can I set up Google Analytics?
    • Exporting and deploying my frontend code
    • What is a partial and what is a prefab?
    • How to set up a basic mulit tenant app on Dittofi
    • How to write a custom endpoint in Dittofi
    • How to integrate Font Awesome into Dittofi
    • How can I set up Dittofi to run on my own private server?
    • How to add roles such as Super Admin, Admin, Manager & User
    • How to prevent duplicate records being added to the database
    • What to do when relation cannot be created because their is violating data in the referenced table
  • Change Logs
    • Dittofi Change Logs
Powered by GitBook
On this page
  • Data models
  • CRUD
  • API Generator
  • Using your auto generated API

Was this helpful?

  1. Learn Backend
  2. Getting Started

Build your first custom API

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

PreviousIntro to APIsNextActions & Events

Last updated 3 years ago

Was this helpful?

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

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

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.

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.

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.

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 .

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

🖥️
Intro to APIs
Actions & Events
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
Auto generated endpoints
Each endpoint comes with a Name, Path and Request Method