Dittofi
Search…
“Hello, world” Tutorial
Learn how to build your first app & make it run inside Dittofi.

Create a new Dittofi App

To start building apps inside the Dittofi Design Studio, you need to first make a new Dittofi App. Its name doesn’t matter, but we’ll call it “App!” in this guide.
Once your app has been created, you can click on your app to open up the Design Studio for that app.
The first screen that you’ll see is the Dittofi Page Builder. This is where we are going to build the frontend of our hello world app.
You’ll see that the page is set out into the following main sections, highlighted on the screenshot below.
The components panel contains a series of pre-built components that you can add to the Canvas to build up your app. You can style & give functionality to these components using the styles, properties & actions panel. Lastly, to create new pages, make data displayed variable & build custom logic, you can use the "Design", "Pages", "Variables" & "Workflow" tabs at the top of the page.
To get started building your "Hello World App", search for a heading component. Click the component & drag it onto the canvas, inside the default div block.
Next, double click on the heading text. This will allow you to edit the text & change the word “heading” to “hello world”. This is shown below.
You can also add an image component to the page, & add a custom image to make your app look a little bit more fancy.
Notice, in the example above, we use the backward facing arrow to add the image component to the page. The backward facing arrow will add the component as the last component inside the div block.
We also use the styles panel on the right of the screen to resize the image & to horizontally align the heading & the image, inside the div block. Notice, you apply horizontal aligning to the div block, which has the effect of aligning the components inside the div block.

Generating the code & publishing your app

To generate your code & publish your app, head over to the menu button in the top left hand corner of the screen & press “Generate Code”. This will automatically build the code for your app & deploy the code into a secure container inside Amazon Web Services.
You can press Preview to view your app in live mode.
You’ll notice that your app has a Dittofi branded URL that is associated with it. Your app is now live on the internet & you can take this URL & share it with whomever you like.

Onward!

We’ve built our “Hello world” app, learnt about how to add components to the page, edit text, generate our apps & publish our app onto the internet. Next: Learn how to build a to-do app →
Last modified 6mo ago