🟪Frontend app development 101

This article gives you a very basic introduction to frontend app development. You can use Dittofi to implement any of the concepts explained in here.

There are four steps that any app developer should think about when building their apps frontend on Dittofi.

1. Define the user experience

2. Implement your designs

3. Refine your app behavior

4. Launch your app

In this tutorial we will continue to build our simple directory app to display short term rentals.

Define the user experience

The UX is the user experience for your app. The UX definition describes what is shown in your app and how it is shown (i.e. the user interface).

Pages

Pages are places where you can display different views of your data on your frontend. Apps can have multiple pages. In our app we are going to create the following pages:

1. A page to capture our users data

2. A page to display short term rentals

Elements

Elements are pre-built blocks of code that have been designed by Dittofi and Dittofi Contributors. These can be searched through and added to your pages with drag and drop. All aspects of each component can be styled from the styles panel in Dittofi.

In our case we can build up our page out of the following elements.

NOTE, in Dittofi you can add custom code blocks of HTML, CSS and Java Script. This allows you to import outside libraries of code, or develop entirely custom components if you want to.

Refine your app behavior

Right now all of the elements that we have added to our page are static. Next we want to give our app the ability to capture user data and write this to our user and properties table, navigate between different pages and to load and display our user and properties data at the appropriate times. To do this we need to understand and use:

1. Variables

2. Repeating groups

3. Workflows

4. Connecting frontend and backend

Launch your app

To launch your app, you need to first build your code and then hit the preview button.