# Getting started

DataFlow is an internal tool builder. You can build your internal tools fast and simply in less than five minutes.

## 1. Create a workspace.

The workspace is a space where we store apps and projects, every team should have a workspace to separate the work. You can create a new workspace by clicking the + button at the top right of the left sidebar.<br>

<figure><img src="https://3121650445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO2swI1pjclnd3mBKYVhl%2Fuploads%2FAtUKsGmwvPyzrkMjyxgm%2Fnew-workspace.png?alt=media&#x26;token=da59d271-931d-4553-813b-a82812faac5b" alt=""><figcaption><p>new workspace</p></figcaption></figure>

## 2. Create a project.

The project is where you create, design, and publish your apps.

<figure><img src="https://3121650445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO2swI1pjclnd3mBKYVhl%2Fuploads%2FUR7SDZfF3BUM5lNpuAhp%2Fnew-project.png?alt=media&#x26;token=3f2e6535-9605-46dd-8b45-33f046012fd5" alt=""><figcaption><p>new project</p></figcaption></figure>

## 3. Create a board and design an app.

Now we can create a board. Boards are a single page where you can lay out components.  After creating the aboard, let's add a button and an input into a board.

<figure><img src="https://3121650445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO2swI1pjclnd3mBKYVhl%2Fuploads%2FC7fhCf0KGuplRXPoN9AS%2Fbutton-input.png?alt=media&#x26;token=d197b72d-59a5-4b38-865b-8aa770e406b8" alt=""><figcaption><p>create a button and an input</p></figcaption></figure>

## 4. Add an adapter.

Adapters are the backbone of the components. It handles events, queries and modifies component attributes at runtimes. \
\ <br>

<figure><img src="https://3121650445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO2swI1pjclnd3mBKYVhl%2Fuploads%2FJi5S4v51WZV6tCRaDXUK%2Fcreate-adatper.png?alt=media&#x26;token=b27713d0-1088-4029-83d8-8cbb7978f4c1" alt=""><figcaption><p>create an adapter</p></figcaption></figure>

After creating an adapter, we can add a script that controls the UI components.

<figure><img src="https://3121650445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO2swI1pjclnd3mBKYVhl%2Fuploads%2F6Jax7NYZo382SGSK1gOC%2Fwrite-event.png?alt=media&#x26;token=57b03ac6-175f-406c-ad0b-8034865dcf45" alt=""><figcaption><p>write adapter script</p></figcaption></figure>

## 5. Connect a component to an adapter.

We can connect a UI component to an adapter to handle its events. For example, we can connect the button click event to the adapter we just created in the step above.

<figure><img src="https://3121650445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO2swI1pjclnd3mBKYVhl%2Fuploads%2FjRuMbm1HFrSIsmPB0c3n%2Fsetup-event.png?alt=media&#x26;token=75866178-b76f-4434-ac6f-6de3a81bcfa6" alt=""><figcaption></figcaption></figure>

## 6. Build test and publish.

After settings up, click the Build button (the triangle button on the toolbar) and check out the result.

<figure><img src="https://3121650445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO2swI1pjclnd3mBKYVhl%2Fuploads%2FD0jlT1PFfGKnBD4Yalwa%2FCleanShot%202022-12-04%20at%2010.26.56%402x.png?alt=media&#x26;token=35e99bdc-1a4b-4fcb-9abd-25e514e11f40" alt=""><figcaption><p>build test</p></figcaption></figure>

Click the home button on the header tab, and you will see the publish button. Click that button to publish the app.

<figure><img src="https://3121650445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO2swI1pjclnd3mBKYVhl%2Fuploads%2FFOpTDZoiWlS8N5nSjLLP%2FCleanShot%202022-12-04%20at%2010.29.57%402x.png?alt=media&#x26;token=c46ab1de-81d6-48ac-bcd4-ce738f12fc0a" alt=""><figcaption></figcaption></figure>
