Quick Start
The Dittofi Quick Start tutorial will show you how to build and launch an app in 6 quick and easy steps
Welcome to the Dittofi Quick Start tutorial! This tutorial will briefly introduce you to Dittofi and teach you how to start using it correctly.
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.
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.
If you’ve not done so already, create your first Dittofi app by clicking “Add App” and choose “Start from scratch”.
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.
Next up, navigate to the Data Models tab and create your first data table, or database. To do this click “Add Table” 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 |
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 an API (Application Programming Interface) for your app. You can generate your API by clicking on the Generate API 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 endpoints 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. For more information on the Generate API functionality read, API Generator.
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.
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.
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 API 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.
When you generated the API in Step 4, this also created workflow to fetch data from your products data model. Open this workflow and change the trigger to "on app mount". This will cause the workflow to trigger fetch products from your Products table whenever your app loads.
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.
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.
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 an API
- 4.Add elements to a page
- 5.Bind variables and trigger workflows
- 6.Build and launch your app
- 7.How to access your app code
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 modified 1yr ago