Part 4: Dittofi app structure
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.
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.
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.
To create a "Get Posts" Endpoint, first click on the endpoints tab and click 
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.
Next, head on over to the actions tab and create a new action by clicking on 
, this is shown below.
Next, rename your action to "Get posts".
Set the trigger component to your Endpoint.
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.
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.
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.
- 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.
Last modified 1yr ago