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.
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 | |
Theory of relativity 101 | Science | |
The history of western philosophy 101 | Philosophy | |
How to do kick ups lesson 24 | Physical Education | |
Advanced calculus lesson | Mathematics |
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:
Create an app
Build a table and add columns to a table
Generate Actions
Add elements to a page
Bind variables and trigger actions
Build and launch your app
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.
Last updated
