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
  • Step 1. Define your entities
  • Step 2. Create your entities
  • Step 3. Populating your tables
  • Step 4. Generating your endpoints, actions and events
  • Template backends
  • Onwards

Was this helpful?

  1. Tutorials
  2. Dittofi App Design

Backend app development 101

This article gives you a very basic introduction to backend app development. You can use Dittofi to implement any of the concepts explained in here.

PreviousApp architecture 101NextFrontend app development 101

Last updated 3 years ago

Was this helpful?

There are four steps that every app creator should follow to build out their apps backend on Dittofi.

  1. Define your entities

  2. Create your tables

  3. Populate your tables

  4. Generating endpoints, actions and events

For the purpose of this Backend app development 101 tutorial we will be building a simple directory app to display short term rentals. Each short term rental can be owned by one user and one user can own many short term rentals.

Step 1. Define your entities

Dittofi app development is all about data. We think about data in terms of entities and their properties.

Every bit of data should be categorized into an entity. An entity is a set of things in the real world. In our example, the entities will be the lists of our short term rentals and the list of our users.

Every entity has a set of standard properties; for example, every User would have a id, name, address, phone number, email and password. Similarly every Short Term Rental will have an id, short name, description, headline image and other images, number of bedrooms and bathrooms and other details.

All instances of an entity will have the same types of properties, but with different values.

Finally, entities can be related to each other. In this case, each User can have multiple Short Term Rentals, and each Short Term Rental belongs to one User. You can see this in the diagram above.

Step 2. Create your entities

You can build up your entities in one of two ways:

  1. Using Dittofi

  2. Using a spreadsheet (Excel, Google Sheets, Smartsheet etc.)

Using Dittofi

Inside Dittofi every entity that you define (Users, Short Term Rentals etc.) is represented by a table. A table is made up of a list of properties that we call "fields".

If you head over to the Data Models tab in Dittofi, you can create a Users table and a Short Term Rentals table in the following way.

Using a spreadsheet

In the same way that built out our entities in Dittofi, you can also choose to build out your entities in a spreadsheet and then import them into Dittofi. This can be useful if you already have your data stored in spreadsheets, or you are more familiar with navigating spreadsheets.

Once you have your data in a spreadsheet you must save your spreadsheet as a CSV and import it into Dittofi in the following way.

Step 3. Populating your tables

The third step is to populate your tables inside Dittofi. This can be done in one of two ways:

  1. Enter data with Dittofi

  2. Uploading data from a CSV file

Enter data with Dittofi

To enter data with Dittofi, you can click anywhere in the last row of your table, this will bring up a form popup.

Next, you can fill in the form that pops up with the details of the data that you want to enter and click "Save". Don't worry if you make a mistake, you can edit this data later on.

This process can be repeated for all of your data, alternatively if you have lots of data you can upload this from a CSV file as shown in the previous step.

NOTE, later on we will show you how to link this form to your frontend, so that your apps users can submit data to your data models from your frontend.

Step 4. Generating your endpoints, actions and events

The frontend of your app (the bit of your app that your users see) will then connect to your backend by connecting to your apps endpoints.

Inside Dittofi we give you the option to automatically generate a basic set endpoints for your app in a single click. This functionality allows your frontend to:

  • Fetch data from your tables

  • Write new data to your tables

  • Update data within your tables

  • Delete data from your tables

The following video explains how you can use the API Generator to fetch data from your apps backend and display the data in your apps frontend.

Template backends

Onwards

Next up we are going to look at defining our user experience and building our frontend.

Note, the id property is an number that can be used to uniquely identify an instance of the entity.

Notice that because one user can have multiple properties we link together our Users table with our Short Term Rentals table using the .

As we saw in , all Dittofi apps follow the same high level structure. There is a backend which is deployed to a fully managed, secure and scalable environment hosted inside Amazon Web Services. The backend is made up of endpoints, actions and events.

This functionality is collectively known as CRUD, which is an acronym for Create, Read, Update and Delete. To learn more about this read docs.

Dittofi gives you some out of the box backends complete with database structure, endpoints, actions and events. You can take these, install them and customize them from within the builder. To review these, check out our .

◼️
auto incrementing
Link to another record field
App architecture 101
API Generator
templates marketplace
Short term rentals and users entities
Adding a new record to your table