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
  • Main posts feed
  • Building the backend
  • Building the frontend
  • What you've just learnt

Was this helpful?

  1. Tutorials
  2. Dittofi Essentials

Part 4: Dittofi app structure

PreviousPart 3: Connecting frontend and backendNextDittofi App Design

Last updated 1 year ago

Was this helpful?

Introduction

In the you learnt how to build a frontend, create frontend variables and trigger workflows to run. In , you learnt how to build a backend data store and how to build an interface into that store using endpoints. In we saw how we brought all these concepts together to build a simple app loading data from our data store and displaying it on our frontend.

Now that you have some idea of what these pieces are, it's time to put that knowledge into practice. We're going to build a small social media feed app, which will include a number of features that demonstrate some real-world use cases. This will help you understand how to use Dittofi in your own applications.

Main posts feed

The main feature for our social media feed app will be a list of posts. We'll add several more pieces to this feature as we go along, but to start off, our first goal is to only show the list of post entries on screen.

We will start by building the backend for this feature. This can be built in 4 quick and easy steps.

Building the backend

Step 1. Creating the Posts data model

The first step is to create a new data model that will contain the data for our posts. This is shown below.

Next, add the following columns to your data model. "Post Title" of type "Single line text", "Author" of type "Single line text" and "Content" of type "Long text".

Add a single post to your Posts Data Model by clicking on the last row of your "Posts" Data Model and filing in the form, as shown below.

Step 2. Create a "Get Posts" Endpoint

To create a "Get Posts" Endpoint, first click on the back-end actions tab and click "+ New Action" as shown below.

Fill in your new endpoint with the details Name: Get Posts, Path: /v1/get_posts, Description: Get user posts and Request method: GET. An example of this is shown below.

Step 3. Rename the action to "Get Posts"

Next, rename your action to "Get posts".

Add a variable called "Posts" of type Model and link the variable to the "Posts" Data Model that we created in Step 1. This is shown below.

The configuration for the variable is shown again below.

Your action is now configured to collect and store the list of posts from your Posts Data Model. The list of posts is being stored in the Posts variable that you have created.

Next, you must pass the data back to your endpoint by setting the Action response variable to your "Posts" variable. This is shown below.

Step 4. Build and Test

This completes the backend of this feature for your app. The next step is to create the frontend for this feature.

NOTE: you can also use the API Generator to create this entire flow in a single click, however, we advise implementing this feature the long way round as at this point it will significantly help increase your understanding of how Dittofi works.

Building the frontend

The first thing to do is to decide what the frontend of your social media post feed is going to look like. In this example, we are going to build the following page.

The video below shows how this page was built up and what components were chosen for it.

Right now everything on the page exists separately from the backend of our system. Our next steps are to link things together so you can get data out of your Dittofi backend. This can be done in 3 quick and easy steps.

Step 1. Creating the repeating group

Step 2. Creating the workflow

Step 3. Build and test

What you've just learnt

  • How to start from an empty app

  • Add a new Data Model

  • Create endpoints and actions to get data from a Data Model

  • How data flows to the frontend of the application

  • What are workflows, variables and repeating groups.

Now that you know these core steps, we're going to use those same steps to add some new features to our social media feed that will make it more useful: viewing a single post, editing existing posts, showing post author details, post timestamps, and reaction buttons.

Finally, (1) build your code by clicking the button and (2) test your configuration from inside the "Get posts" endpoint that we created in Step 2.

In this , we learnt

Part 4: Dittofi app structure
Part 1: Frontend terms and concepts
Part 2: Backend terms and concepts
Part 3: Connecting frontend and backend