Step-by-step guide

A guide to quickly create your first app from scratch.

PreviousSpeed intro NextAppfarm Showroom

Last updated 11 months ago

Was this helpful?

Once you have access to Appfarm Create, you can start building your first app. This written guide takes you through the steps for creating a simple task management app called Task Master, from scratch.

1. Create a new app

Get started by creating a new app (Blank App) and choosing a name and icon.

In Appfarm Create:

Click Apps in the main menu.
Click + New app.
Select Blank app.
Give the app the name Task Master and choose any icon.
Click Create app.

2. Define a data model

Once your app is created you will be taken to the UI designer. Before we start building the UI though, we will define a data model.

In the global data model you define object classes which represent the data you want to store in your database. For example, if you want to store all the products in your inventory you would need an object class called Product. Object classes are equivalent to tables in relational databases or documents in document databases.

Within an object class you can add properties, which define the specific values you want to store for a given object. Each property has a data type, which could be a simple type like a string or integer, an Enumerated Type (enum), or a reference to another object class. Using the product example from above you might have properties like Name (string), Cost (float) and Status (enum).

A typical task management app has a set of projects, each with different tasks. So to build our app, we need to define two object classes: Project and Task.

First, we'll create the Project object class.

Click Data Model in the main menu.
Click + Object Class.
For Name, enter Project.
Click Create.
In the list of object classes, expand the Project object class, and click + Add property.
For Property Name, enter Title and assign the data type String.
Add an additional property named Description with data type String.

Next we'll create an enumerated type to store a project's status.

Hover over the + speed dial.
Click Enums and then click + Enum.
For Name, enter Project status.
Under Enum Values, add three values with the following display names:
- Not started
- In progress
- Finished
Return to the Project object class and a new property with the name Status and data type Project status.

Finally, we'll add the Task object class.

Create a new object class.
Name the object class Task.
Create the following properties with the matching data types:
- Title (String)
- Done (Boolean)
- Project (Project)

Read more about the global data model in the reference guide.

3. Design the user interface

Now we can start designing our user interface (UI) using the pre-built components from the library. The UI is made up of views which contain the UI components. The UI components are visualized in the UI designer and are also listed in a tree-like structure in the neighboring Views pane.

Let's configure our UI to have an App bar which provides a toolbar at the top of the screen and a list where we can display projects.

Click Apps > Task Master in the main menu. If you can't see this menu item, click Apps and then open the Task Master app.
The default view will be selected.
In the Component Properties pane on the right-hand side:
- Set the Name of the view to My projects.
- Select the Enable App Bar checkbox.
- Set the Title to My projects.
In the Components pane to the left, drag a List component into the view.

Read more about the UI designer in the reference guide.

4. Configure data sources and bind data to the UI

To connect the app to our data model we first need to configure data sources. A data source provides create/read/update/delete access to one more objects of a specific object class.

Click the Data tab in the toolbar.
In the App Data pane click + to add a new data source.
Select Project from the list of object classes.
Set the Name of the data source to Projects. The plural usage helps to indicate that this data source will contain many objects.
Select the Read All Objects checkbox, which means the app will read in all projects to this data source when the app is loaded.
Add another data source, selecting Task as the object class and naming it Tasks.
In the Tasks data source, click the Filter field to define a filter. Set the filter so that Tasks.Project EQUALS Projects (Selected). This condition means that the data source will be empty until a project is selected in the Projects data source.

Read more about app data in the reference guide.

Now that we've configured our data sources, we can bind data to the UI.

Let's bind the list component we added to the UI earlier to the Projects data source.

Click Apps > Task Master in the main menu.
Select the previously added List component, either in the tree or the UI designer.
In the Component Properties pane on the right-hand side:
- Add a Data Source. Click Select data binding, select the Projects and click OK.
- Set Primary Text. Open the context menu, click Data Binding…, select the Title property and click OK.
- Set Secondary Text. Data bind it to the Status property.

5. Trigger actions to run logic

Most of the UI components have predefined event handlers, such as On Click, On View Load or On Value Changed. Each one can be configured to trigger an action when the event occurs, allowing you to dynamically execute logic based on user interaction.

Let's add a button that opens a new dialog when the On Click event is called. We'll use this dialog to create a new project.

First, add the button to the UI.

In the Components pane to the left, drag a Floating action button component and drop it under your List component in the view tree-structure.
Open the Styles pane on the right-hand side.
Set the Position to Fixed.
Set the Offset to 16px for the right and bottom values.

Next, create the dialog that we want to open.

Set the Name of the dialog to New project.

Now we can create a new action to trigger when the button is clicked.

Select the Floating action button component you added earlier, either in the view tree or the UI designer.
In the Component Properties pane, under Event handlers click the On Click field to open the Select Action dialog.
Click Create new action.
Name the action Open new project dialog.
In the Action Nodes pane to the left, click the Open Dialog action node to add it to the action.
In the action node properties pane to the right, set Dialog to the New project dialog.

Read more about actions in the reference guide.

6. Collect and save user input

The most common way to collect and save input from a user is to first add it to a temporary, runtime object and store it the database when the user clicks a "Save" button. This approach is very efficient since it only interacts with the database when the data is actually saved.

Let's create a runtime data source to store a new project.

Click the Data tab in the toolbar.
In the App Data pane click + to add a new data source.
Select Project from the list of object classes and click Add.
Name the data source Project (temp). The singular term, plus the reference in parentheses helps to indicate that this will be a runtime data source containing a single object.
Set Cardinality to One, since this data source will just store one object at a time.
Check Runtime Only.
Check Auto Create.

Now we can add input fields to the new project dialog and bind them to our newly created data source.

Click Apps > Task Master in the main menu.
Click the New project dialog in the tree view. In the Styles pane set the Padding to 24px and click the link icon to set it for all four sides.
Add a Text component to the dialog and set the Text property to New project. Set Variant to H5.
Add a Text Edit component and bind the Value property to Project (temp).Title.
Add another Text Edit component and bind the value to Project (temp).Description. Select the Multiline checkbox and set Rows to 2.
Add a Select component and bind the the value to Project (temp).Status.
Add a Container component. In the Styles pane, set Display to Flex and Justify Content to End.
Finally, add a Button component inside the container. Set the Label to Create project and Variant to Contained.

The view tree should now look like this:

Next we need to trigger an action to save the project when the Create project button is clicked.

Select the Create Project button and under Event handlers click the On Click field to bring up the Select Action dialog.
Click Create New Action and call the action Create project.
Add a Persist Objects action node.
- Set the Data Source to Project (temp).
Add a Close Dialog action node.
Add a Delete Objects action node.
- Set the Data Source to Project (temp). Since we enabled Auto Create on this data source a new, empty object will automatically be created so the user can immediately add another new project.

As you make changes in Appfarm Create, they are instantly deployed to the Development environment. This means you can access a functional, live preview of your app as you build it.

Click the Play icon (Preview App) in the top-right menu to open the development client and run the app.
Add new projects and see them appear in the list.

If you have access to additional environments, you can deploy to them under Deploy in the main menu. Press the blue button to deploy your app to a given environment.

Next steps

Now you have a foundation for adding further functionality such as managing Tasks within each project. While we have already developed a fully-functioning app, we have barely scratched the surface of what is possible with Appfarm Create.

As a next step, we recommend spending a few hours on our interactive Intro Course.

You may also check out the Showroom (register for access) for inspiration, or dive into the videos and further documentation to help you develop your app further.