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
  • Introduction
  • How to Read This Tutorial​
  • What is Dittofi?
  • Dittofi is three things
  • Next up

Was this helpful?

  1. Tutorials

Dittofi Essentials

The Dittofi Essentials give you a "top down" introduction to essential concepts in Dittofi. In this tutorial we cover what is Dittofi and why you might want to use it.

PreviousQuick StartNextPart 1: Frontend terms and concepts

Last updated 1 year ago

Was this helpful?

WHAT YOU'LL LEARN IN DITTOFI ESSENTIALS

  • What is Dittofi and why you might want to use it

  • Key Dittofi terms and concepts

  • How data flows around a Dittofi App

Introduction

Welcome to the Dittofi Essentials tutorial! This tutorial will introduce you to Dittofi and teach you how to use it the right way, using our latest features and best practices. By the time you finish, you should be able to start building your own Dittofi applications using the tools and patterns you've learned here.

In Part 1, 2 and 3 of this tutorial, we'll cover the key concepts and terms you need to know to use , and to . Then, in , we will use the concepts learnt in Parts 1 - 3 to examine a basic Dittofi app to see how all of the pieces fit together.

Starting in Part 5: Dittofi Data Flow, we'll use what we have learnt in parts 1 - 4 to build a small social media feed app with some real-world features, to see how those pieces actually work in practice, and talk about some important patterns and guidelines for using Dittofi.

How to Read This Tutorial​

This page will focus on showing you how to use Dittofi the right way, and explain just enough of the concepts so that you can understand how to build Dittofi apps correctly.

PREREQUISITES

There are no prerequisites required to read Dittofi Essentials, however we do recommend that, if you've not already done so, you

  1. Create a Dittofi account @

  2. Create and app and complete the initial product tour of the Dittofi Page Builder

  3. Read our tutorial

Before we continue, let's have a look at what is Dittofi and why you might want to use it.

What is Dittofi?

It helps to understand what this "Dittofi" thing is in the first place. What does it do? What problems does it help me solve? Why would I want to use it?

Dittofi is three things

1. Dittofi is a no-code tool

No-code platforms enable non-technical users to build software applications visually by dragging and dropping components to create a powerful apps 80% faster than writing code by hand. Users don't need any previous coding experience to build applications using no-code.

2. Dittofi is a code generator

Real software applications are built using computer code. Unlike other no-code platforms, Dittofi utilizes a technology known as code generation. Dittofi uses this technology to convert your visual no-code designs into real, human readable, high quality and scalable computer code which can be exported and owned.

3. Dittofi is a full stack app builder with hosting

The frontend of your app is the bit that your users see. The backend is the bit that users don't see e.g. the application server, third party API integrations and a database. Dittofi lets you build both the frontend and backend of your software apps.

Dittofi also comes with a hosting model that lets you deploy your apps in a single click into a live environment powered by Amazon Web Services - the same technology that powers apps like Netflix, Pintrest, Facebook etc.

Next up

You will learn key terms and concepts required to use .

Dittofi's frontend builder
Dittofi's backend builder
connect frontend and backend
Part 4: Dittofi App Structure
https://dittofi.com/website/login/
Quick Start
Dittofi's Frontend Builder
How Dittofi works: Build enterprise grade apps visually, generate real computer code that you can deploy and ow