Part 4: Dittofi app structure

Introduction

In the Part 1: Frontend terms and concepts you learnt how to build a frontend, create frontend variables and trigger workflows to run. In Part 2: Backend terms and concepts, you learnt how to build a backend data store and how to build an interface into that store using endpoints. In Part 3: Connecting frontend and backend 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

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.

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

In this Part 4: Dittofi app structure, we 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.