Dittofi
Search…
Build a to-do list app
Learn how to build a to-do list app that shows a list of tasks pulled out of your Dittofi backend.

What your final app will look like

Your final app will be a list of to-dos.
We will store the to-dos inside a database backend, configure your app to pull the list of to-dos out of your backend & then present these to-dos to your application frontend in a very simple web app.
The final high level structure of your app will look like the following:
Data flows around the system either being submitted from the left hand side of the diagram & passing from data input into your "User Web App" to an "Endpoint", through an "Action" & into a "Data Store" OR data is pulled from your Data Store & passed to an "Action", to an "Endpoint" & back to your Users Web App.
In this tutorial, we will start by creating your "Data Store" to hold your list of to-dos.

Step 1. Creating A Table

The first step is to create a place to store our list of to-dos. To do this, head on over to the Data Models Tab & create a new table called “todos”.
Next add a column to your table called “todo”.
You can edit the data in the "todos" table by clicking on any of the cells in the table. In our example we are going to add a few to-dos.
Note, the Id & Created At fields are automatically set by the system. The Id column is a unique auto incrementing number given to every new row of data that you add to your table. The Created At field records the date & time that a new field has been created.
By creating the table, we have set up a database backend that is being used to store all of our data. The next step is to configure a method to get the data that we want to display in our web app out of the database.

Step 2. Configure Your Endpoint & Action

The second step is to set up an endpoint & an associated action. The endpoint & its action will be used to get the to-dos that you added in step 1 out of your to-dos table.

Adding an Endpoint

First, let’s set up our endpoint. This can be done by clicking on the “+Add Endpoints” button from inside the Endpoints tab.
Once added an endpoint, you need to give your endpoint a name, a path, set the request method to GET & press save.
The path for the endpoint is a URL that must be unique for each request method.

Adding an Action

By itself the endpoint does nothing. In order for the endpoint to do something, we need to create an associated action. This can be done by pressing the “+Add Action” button & giving your action a name.
Next, you will need to set the trigger endpoint. This has the effect of telling the system to trigger your run “Get to-dos action” whenever your “Get to-dos” endpoint is hit.
Lastly, we will need to set up a variable that we will use to store the list of to-dos that we get out of our database.
To do this press the Add button in the Variables section, set the Kind to Collection, label & name to “list of todos”, set the type to Basic, the Model to “Todos” & press save. The Kind “Collection” represents a collection or list of records. At a code level this is a slice, but that is not important to know!
Lastly set your action response variable to “list of todos”. This will send the response from your action to your endpoint, so that your endpoint can in turn forward this response on towards the frontend of your system to display.
We can test what we have done so far by generating the code for our endpoint & action, & then testing our endpoint out to see if we get the list of to-dos out of our to-dos table.
Note, that when you test the endpoint, if it is successful, you will get a 200 response code & the body of your request will contain your list of to-dos.

Step 3. Creating a Workflow

The next step in getting your data to be displayed on the frontend of your web app is to create a frontend workflow. This is going to be what starts the endpoint from your web app frontend.
Before we start this process, we need a place to store the list of to-dos that is returned from our endpoint to our frontend. This can be done by pressing the “+Add App Variable” from inside your variables tab, give your variable a distinctive name & set the Kind to Collection.
Next head over to the Workflows tab & add a new workflow to get your to-dos.
The first thing our workflow will do is run the endpoint that we created. This will get the data out of our database.
The second thing we need to do is to set the data returned from our endpoint equal to the data inside our frontend variable that we have just created.
To do this, use the “Set Field” event & set your event variable equal to your frontend variable & give it the value that has been sent back from your endpoint in the previous event.

Step 4. Building Your Frontend

Next we build your web app frontend inside the Design tab. First add a div component to the canvas.
Next, we turn this div component into a repeating group by binding the “Repeating with” option to our frontend variable.
Since our frontend variable is of kind collection, our div block will then repeat down the screen, giving us a visual placeholder for the records in our collection.
Since each row of our collection contains three values that are retrieved from our table (Id, Created At & todo), we need to specify which value we want to display on a row.
To achieve this, we add a header component to our div block & bind the header text to display ONLY the values inside the “todos” column of a specific row of our repeating group.
For clarity, we are picking only the field below to display.

Step 5. Triggering Your Workflow

The final step in building your web app that will display the list the to-dos in your database is to pick a method to trigger your workflow from your frontend. This can be for example, when a page component loads onto the screen, when a user clicks on a component, when a component changes for example, changing one color for another & so on. In our case, we want to load our list of to-dos from our to-dos table when our web app loads up.
The easiest way to accomplish this is to select the web app's body element, go over to the triggers tab, add a workflow, set the trigger to “on load” & select the workflow that we want to run from the drop down list.
That’s it! We are all done! So now we can just build our code & check out our final web app by pressing the preview button on the top right corner of the screen.

Onward!

We’ve built an app to retrieve a list of data from our backend, and learnt how to create endpoints, actions & events, workflows & variables.
In the next tutorial we will learn how to build an app that collects user information & sends this to our backend to store in a custom data model. Next: Learn how to build a sign up form →
Last modified 6mo ago