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
  • Dittofi terms and concepts (backend only)
  • Data models
  • Endpoints
  • Back-end Actions
  • Backend Variables
  • Actions and Events
  • What you've learned
  • What's up next?

Was this helpful?

  1. Tutorials
  2. Dittofi Essentials

Part 2: Backend terms and concepts

The Dittofi Essentials give you a "top down" introduction to essential concepts in Dittofi. In this tutorial we cover backend terms and concepts.

PreviousPart 1: Frontend terms and conceptsNextPart 3: Connecting frontend and backend

Last updated 1 year ago

Was this helpful?

WHAT YOU'LL LEARN

  • Key Dittofi terms and concepts (backend only)

  • Data models

  • Endpoints

  • Actions

  • Backend Variables

  • Actions and Events

Dittofi terms and concepts (backend only)

In the last lesson you learnt the key terms and concepts required to build beautiful and powerful frontend's on Dittofi. In this lesson you will learn the key concepts required to build robust, high performance and scalable Dittofi backends.

Data models

Data models are used to store all of your apps data. You can create them from within Dittofi's Data Models tab. In the GIF below, we create a new data model called "Products". The Products data model will be used to store our products data. Products can be anything e.g. edtech courses, trainers, mentors etc.

Each Data Model, or database can be used to store data in multiple "fields". Fields are similar to columns in a spreadsheet. Fields can be used to categorize you data by a custom typed name and type (or kind) of data e.g. text, attachment, checkbox etc.

Let's add three columns to our Products data model now: Product (of type single line text), Category (of type single line text) and image (of type URL).

You can enter data into your columns by clicking on the bottom row of your data model and filling in the form that pops up.

You can administer data by clicking on the individual cells or by expanding the entire row of data.

Add the following table of data to your Products data model.

Product
Category
Image

Amazing biology lesson

Science

Theory of relativity 101

Science

The history of western philosophy 101

Philosophy

How to do kick ups lesson 24

Physical Education

Advanced calculus lesson

Mathematics

Endpoints

The frontend of your app connects to your backend via links, or endpoints. To create your first endpoint or to test, edit or delete existing endpoints head over to the Dittofi Back-End Actions tab. You can create and test your first endpoint in 3 quick steps.

Step 1. Create a Back-End Action

Create your first back-end action by clicking on "+ New Action".

Step 2. Configure your endpoint

Configure your endpoint by clicking the "+ Add Trigger" button and selecting "Endpoint" from the dropdown.

Additionally, fill in the endpoint form as below:

Step 3. Test your endpoint

Click on "Build code" to build the code for your endpoint. Next, test your endpoint code by clicking the "Run" button in the bottom right hand corner of your endpoint.

When testing your endpoint, notice two things:

  1. Your endpoint has a URL. This is because an endpoint is just a link and links are URLs.

  2. Your endpoint has a response code 404. The response codes let us know if the webservice endpoints have run successfully. A 404 code means that the code for this webservice endpoint does not exist. The reason for this is that the endpoint by itself does nothing. To give your endpoint some functionality, you need to associate it with an Action.

Back-end Actions

Actions give endpoints functionality. For example, you might want to create an endpoint that will fetch data out of one of your data models so that you can display it on your apps frontend. To do this you will need to create an action and link it to your endpoint.

To begin with let's create an action that is just going to return the text "Hello World" to our endpoint. We can do this in 5 quick steps.

Step 1. Create an action

Go to the back-end actions tab and create a new action called "my first action".

Step 2. Link your action to an endpoint

Link your action with your Get products data endpoint. To be clear this means that your action will be triggered whenever your Get products data endpoint is run.

Step 3. Create a backend variable

Create a backend variable inside your action. This variable has what is called global scope within your action. This means that it can be used anywhere inside your action.

The variable, or placeholder is going to be used to store the text "Hello World" so, give it a Kind text, a name and label of "MyVariable" and set the Expression to the fixed texstring "Hello World".

Step 4. Set the response variable

Set the response variable in our action to "MyVariable" This is going to send the text string "Hello World" back to our Get products data webservice.

Step 5. Build your code and test

Build your code and test your endpoint to see that your webservice endpoint will return the text string "Hello World" from your action. Notice also that your endpoint now has a Response code 200, which means that it executed successfully.

Backend Variables

Let's suppose we want to to fetch a list of products out of our Products data model. We can do this in 5 quick steps.

Step 1. Create a new action

In the actions tab create a new action, called "Get products data". This action is going to be used to get a lists of products out of your data model.

Step 2. Link your endpoint and action

Set your action to be triggered by your "Get all products data" endpoint. To be clear, this means that your action will be triggered whenever your "Get all products data" endpoint is run.

Step 3. Create a collection variable

Create a backend variable inside our Action. This variable is going to be used to store a list list of products taken from our products data model and return this data back to our endpoint.

Note, the variable we create is of kind "collection". A collection is a list of records. In our case, this will be a list of products.

Step 4. Set a response variable

Set a "Response Variable" inside your action. This variable will return data from your Get products data action back to your Get products data endpoint.

Step 5. Build your code and test

Build your code and test your endpoint to see that your endpoint will return products data from your Products data model. Notice also that your endpoint has a Response code 200, which means that it executed successfully.

Actions and Events

Actions get more power with the help of events. Events can be chained together inside an action to perform complex logic within your backend. For example, you might want to create a new record inside one of your a data models, send an email to a new user of your app, integrate with a third party API etc. All of this is possible with the use of event chains.

The example below shows a typical password reset event chain that chains together a custom code event, a condition event and an update event.

What you've learned

Dittofi does have a number of new terms and concepts to remember. As a reminder, here's what we just covered:

  • Data models: these are where you store your apps data.

  • Endpoints: these are links that allow apps to connect with your backend. Endpoints do nothing by themselves.

  • Actions: these give endpoints functionality.

  • Backend variables: there are many different types of backend variables and these can be used to move data around your Dittofi backend.

  • Events: there are lots of different types of events. These can be chained together within an action to give your actions more advanced functionality.

What's up next?

So far we have only used text variables however, Dittofi has a complete list of backend variables for app development e.g. Collection, Number, DataTime etc.. For a complete reference guide to Backend Variables see .

Each event comes with it's own form to fill in. For a complete reference guide to the Dittofi events see .

In Part 1 you learnt essential Dittofi frontend terms and concepts. In Part 2 (this tutorial) you learnt essential Dittofi backend terms and concepts. In , we'll look at a full working example to see how the frontend and backend pieces fit together.

Backend Variable Types
Endpoints, Actions & Events
Part 3: Connecting frontend and backend
Click for image URL
Click for image URL
Click for image URL
Click for image URL
Click for image URL