Quick Start

Dittofi offers a lot of flexibility, catering to both those seeking rapid results and those preferring in-depth exploration. In this tutorial, we will show you how to build and launch an app in 6 easy

How to Read This Tutorial​

This tutorial will focus only on how to set up a Dittofi application and the main components you'll use. For explanations of what Dittofi is, how it works, and full examples of how to use Dittofi, see the Dittofi core docs tutorials.

Build an app in 6 steps

In this tutorial we are going to create an app to display a list of products stored in a database. Products can be anything e.g. edtech courses, trainers, mentors etc. The final app will display a list of courses. These courses will be stored inside a database. The GIF below shows a short demo of this app.

Step 1. Create a Dittofi app

If you’ve not done so already, create your first Dittofi app by clicking “Add an app” and choose the free “Blank” template to get started.

How to create your first app inside Dittofi.

Note, if this is the first time that you’ve created an app a product tour will start. We recommend that you take this, if you have not already done so.

Step 2. Create a Dittofi Table

Next up, navigate to the Data Models tab and create your first data table, or database. To do this click “Add Table” , then click the "Use Schema" button on the "Empty Table" card and give your table the name “Products”.

Once you have created your table, add three columns to the table. Product (with field type Single line text), Category (with field type Single line text) and Image (with field type URL).

Lastly add some products to your Products table by clicking on the bottom row of the table and filling in the popup.

Copy and paste the following products into your Products table.

Product	Category	Image
Amazing biology lesson	Science	Click for image URL
Theory of relativity 101	Science	Click for image URL
The history of western philosophy 101	Philosophy	Click for image URL
How to do kick ups lesson 24	Physical Education	Click for image URL
Advanced calculus lesson	Mathematics	Click for image URL

Step 3. Generate Actions

To get data out of your Products table and to display the products in our app, you need to first create a way for our app to request data from your Products table. To do this you can generate actions for your app. You can generate actions by clicking on the Generate Actions button.

From the popup you can choose what functionality you want to generate for this table e.g. get all products out of your Products table and click "Submit".

After you have clicked generate, you can check under your back-end actions tab and you’ll see that you’ve automatically created a GET endpoint. This will be used to get data out of your Products table.

Step 4. Add elements to the page

Now we have a method for our app to get data out of our Products table, we need a place to display our list of products in our app. To do this (1) return to the Dittofi Page Builder, (2) expand the elements panel, (3) add a container to the page, put a div inside the container and add an image and two headings to the div.

Note, if you’ve already completed the initial product tour, your page might look slightly different at this point.

Step 5. Use your back-end actions on the page

Next, we need to configure our app to populate our card layout with data from our Products table. This can be done in two steps.

Step 1. Bind card to repeating with option

Bind your div block to the repeating with option.

The repeating with option is a frontend variable that stores a list of Products data. This was automatically created to store your Products data when you generated the backend-action in Step 4.

The "repeating with" variable turns your div into a variable that will display all the rows of data inside your products data model. The next step is to pick which element inside your div block you want to display which column in each row. In our case, we can bind the image element to our image, the first heading element to our product column and the second image to our category column.

For more information on variables and actions read Dittofi Essentials.

Step 2. Bind card items to table data

Now we can connect each element in the div block to each data item that we have stored in the table.

Step 6. Build and launch your app

The final step is to build your app and launch it. To do this click on the “Build code” button and then preview.

The build button writes out the individual lines of code for your app (React/ Redux, HTML, CSS for your frontend and golang on your backend). The build button also pushes your code into a Docker container that is running inside a fully optimized Amazon Web Service instance, complete with an Nginx web server and Postgresql database.

Access app code

You can access the code for your app by returning to the workspaces page and clicking on "Get App Code" from under your Dittofi app settings.

What you've learned

That was a brief overview of how to build and launch an app using Dittofi. You learnt how to:

1. Create an app

2. Build a table and add columns to a table

3. Generate Actions

4. Add elements to a page

5. Bind variables and trigger actions

6. Build and launch your app

7. How to access your app code

What next?

We recommend going through the Dittofi Essentials tutorials next. These will give you a complete understanding of how Dittofi works and how to use it correctly.