# Step-by-step guide

Once you have access to [Appfarm Create](https://create.appfarm.io), 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. 

{% embed url="<https://www.loom.com/share/a0d3dd0bcb1041eca2a288729396d07e?sid=a34df8a2-2bae-45ff-9054-36c3d7ecce8d>" %}

{% tabs %}
{% tab title="Task Master" %}
In [Appfarm Create](https://create.appfarm.io):

* Click **Apps** in the main menu.
* Click **+** **New app**.
* Select **Blank app**.
* Give the app the name `Task Master` and choose any icon.&#x20;
* Click **Create app**.
  {% endtab %}
  {% endtabs %}

## 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)](https://docs.appfarm.io/reference/data-model/enumerated-types), 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).

{% embed url="<https://www.loom.com/share/22ee6beb0c70445b8c3429e926258ddc?sid=e3a29524-4b05-411f-a098-d655db4dd78f>" %}

{% tabs %}
{% tab title="Task Master" %}
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`)

![The completed data model](https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2F3YBOEggVr5wYDaZnFDvP%2Fquickstart-2.png?alt=media\&token=197083c3-85b7-4862-911a-39831ba77f16)
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Read more about the [global data model](https://docs.appfarm.io/reference/data-model) in the reference guide.
{% endhint %}

## 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.

{% embed url="<https://www.loom.com/share/c687920781004379bed6f8501f1622f0?sid=7dfa2a38-0803-424d-aa0e-6ea2bbf24846>" %}

{% tabs %}
{% tab title="Task Master" %}
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** ap&#x70;**.**
* 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](https://docs.appfarm.io/library/ui-components/list) into the view.
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}
Read more about the [UI designer](https://docs.appfarm.io/reference/apps/ui) in the reference guide.
{% endhint %}

## 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.

{% embed url="<https://www.loom.com/share/803125bcf3314c80ab71ad97ba57451c?sid=5a445174-957a-48b4-b868-9f21434fbbd8>" %}

{% tabs %}
{% tab title="Task Master" %}

* 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.

![The filter definition for the Tasks data source](https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2FB5X7AaBpnNng72oqpYSj%2Fquickstart-4.png?alt=media\&token=0ec9182c-3977-4198-91ce-47a8e00c2c8f)
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Read more about [app data](https://docs.appfarm.io/reference/apps/data) in the reference guide.
{% endhint %}

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

{% tabs %}
{% tab title="Task Master" %}
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.

![Binding the list component to the data source](https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2FUCC1hXDJOrqZrkMcNKfq%2FUten%20navn.jpeg?alt=media\&token=7934f65a-9ec3-4994-9b2d-793ad20236fb)
{% endtab %}
{% endtabs %}

## 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.

{% embed url="<https://www.loom.com/share/f93d630def28499489b434c6691e9da5?sid=6e33d1a2-1ef8-4ea1-9534-40c53873b2ff>" %}

{% tabs %}
{% tab title="Task Master" %}
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.

![Setting the styles for the Floating Action Button](https://29237295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MiLU-xcHu0eLZiTxcmZ%2F-MjnHVNIjoQtF-rYJVYE%2F-MjnKpuEMiQQVKuc7jpB%2FAdd%20Floating%20Action%20Button.PNG?alt=media\&token=01aca2e8-fae1-4209-86e5-88af28192f12)

Next, create the dialog that we want to open.

* Click the down arrow (:arrow\_down\_small:) in the **Views** pane, and then click **Add Dialog**.
* Set the **Name** of the dialog to `New project`.

![Selecting Add Dialog](https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2FwIEqtZ69kvJOQq8G1Dt8%2FSkjermbilde%202021-10-13%20kl.%2016.39.45.png?alt=media\&token=1febbb51-e628-4094-a059-51ed42402979)

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.
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}
Read more about [actions](https://docs.appfarm.io/reference/apps/actions) in the reference guide.
{% endhint %}

## 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.

{% embed url="<https://www.loom.com/share/d6ccdf2719cc46e1af6987b796863135?sid=47c3e43b-c3b5-4866-a7c8-145a5345a828>" %}

{% tabs %}
{% tab title="Task Master" %}
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**.

![The completed setup of the Project (temp) runtime data source](https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2FKw1xi6b2hPt5r8OzLrzW%2Fquickstart-7.png?alt=media\&token=01027f70-41c3-4472-b2b0-14a049b349d8)

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 finished New project dialog](https://29237295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MiLU-xcHu0eLZiTxcmZ%2F-MjnHVNIjoQtF-rYJVYE%2F-MjnLHa2xA8OJVej7TRZ%2Fcreate-first-app-dialog.png?alt=media\&token=a6bc947f-499d-45d7-bde9-f5368d4310ec)

\
The view tree should now look like this:<br>

![The view tree in the UI designer](https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2Fh1m00tJYgC3KPSeNnFrE%2Fquickstart-7b.png?alt=media\&token=7304699f-177f-469f-93ab-8762e44d5212)

\
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.&#x20;
* 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.&#x20;

  * 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.

![The completed action](https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2Fs852MD7zX38ssY7niC1F%2Fquickstart-7c.png?alt=media\&token=235884af-9f7a-4064-bcbb-f7f85ce92c18)
{% endtab %}
{% endtabs %}

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.

{% tabs %}
{% tab title="Task Master" %}

* 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.
  {% endtab %}
  {% endtabs %}

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**.

{% content-ref url="../../appcademy/appfarm-fundamentals/intro-course" %}
[intro-course](https://docs.appfarm.io/appcademy/appfarm-fundamentals/intro-course)
{% endcontent-ref %}

You may also check out the [Showroom](https://showroom.appfarm.app) ([register for access](https://showroom.appfarm.app/sign-up)) for inspiration, or dive into the [videos and further documentation](https://docs.appfarm.io/appcademy/appfarm-fundamentals) to help you develop your app further.