# Quickstart

Airkit is an application development platform that helps you build apps faster and deploy omni-channel experiences.

Here, we go over some of the basics, including how to:

* Make API requests
* Bind data to a local variable
* Design a custom UI that displays data dynamically
* Preview, debug, and publish your application

***

<details>

<summary>Access the platform 🔑</summary>

#### Log into Airkit

All of the tools required to build apps in Airkit are available on our browser-based platform.

* If you already have access to an Airkit account, you can sign in [here](https://studio.airkit.com).
* If your teammates have an existing [Organization](../administration/airkit-organizations) you want to join, someone with Admin permissions will need to invite you per the instructions given in [Adding Users to Airkit](../administration/adding-users-to-airkit).
* Otherwise, [sign up for a free trial](https://www.airkit.com/free-trial) to make an account and get started.

</details>

<details>

<summary>Create an app and open it in the Studio 🛠️</summary>

#### Create a blank app

Once logged in click on the **Create New** Button in the upper right corner.

Start with a blank app by selecting the **Create blank app** box.

#### Open the Studio and edit the app

Click on the **Edit in Studio** button to the upper right of the screen to begin building out your app:

<img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-ad0896e7a6ec9ca2e0b7f0c57dac629ace173783%2Fquickstart-v181-0.png?alt=media" alt="" data-size="original">

</details>

## Make an HTTP Request

1. The Studio consists of multiple **Builders**, which you can toggle between using the **Builder Bar** to the far left of the Studio. Toggle over to to **Connections** Builder and select **Data Flow**.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-79169d4b1e6f0b0fe3ac1ade3ca7418bed52bf8c%2Fquickstart-v181-1.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

2. Click on the '+' icon that appears between the **Start** and **End** Blocks in the Stage, and in the selection menu that pops up, select **HTTP Request**.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-464f3a72fbdfdd504a80072ddd512f494e4b60ba%2Fquickstart-v181-2.png?alt=media)

3. An [HTTP Request](../data-operations/http-request-data-operation) Data Operation will appear between the **Start** and **End** Boxes. Change the **Method** is set to `GET` and enter the following URL:

```
"https://app.airkit.com/travel-products-catalog/products"
```

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-513b55ce99c5ba9d75be74b0c2c2421692ac5731%2Fquickstart-v181-3.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

> 📘 This endpoint returns a list of objects from a dummy product catalog. This API was made in Airkit, check out the API docs [here](../building-apps/payments).
>
> For simplicity, this API requires no authentication. In most cases, it is recommended building authentication into your App APIs. Read more in [Securing App APIs](https://github.com/airkit/airkit-docs/blob/master/docs/v18-1/%F0%9F%94%97/README.md).

4. Click the **Run** Button to submit the HTTP Request. The JSON packet returned by the API will be accessible in the Data Flow as `result`.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-36e72b81f62b1dae5f6905d7ad6323e03d8dd3ae%2Fquickstart-v181-4.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

Congratulations! You've just used Airkit to pull data from an external API.

> 📘 Airkit can integrate with all sorts of APIs. For more on how to integrate Airkit apps with your external systems, see [Setting up Integrations](../data-and-integrations/connecting-to-external-systems/setting-up-integrations).

### Take Input and Add Query Parameters

Data Flows are custom connections. Conceptually, they work like functions: they can take in input, they can process data based on any input they might have received, and they can return the resulting output.

We've already made a Data Flow that can pull data from an external API. Next, we'll configure the Data Flow so that it can parse input and use it as a Query Parameter in the HTTP Request.

We'll be using the Query Parameter "collection", which has only a few allowed values. See [the API documentation](https://github.com/airkit/airkit-docs/blob/master/docs/v18-1/%F0%9F%94%97/README.md) for more details.

1. In the Inspector, found to the far right of the **Connections** Builder,click on the '+' icon to the right of **Inputs**. Select **Text** from the dropdown menu of variable data types.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-4116b0c1aff23d7f4bde3ce8e5d4674b2d83a272%2Fquickstart-v181-5.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

2. Double click on the new Text variable, designated `variable1`, and rename it to `query_param`. Note how this changes how the variable appears in both the Inspector and the center Stage:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-d0179b998b37f7496ca4978835152ace423f2bf6%2Fquickstart-v181-6.png?alt=media)

3. In the **Start** Block in the Stage, change the example value assigned to `query_param` from "Sample Text" to "Basics".

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-7581e8db25a590f7bf443030b01b49d6027e9b14%2Fquickstart-v181-7.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

> 🚧 Example values are for testing purposes only The dummy values given here are **not** default values, and they will **not** be used in production, but they **will** be useful for testing purposes while working within the Data Flow.

4. Scroll back down to the **HTTP Request** Data Operation that was inserted under the **Start** Block. Under **Query Parameters** , click on the '+' icon to the right of **HTTP Parameter**. Under **Field Name** enter `"collection"`, and under **Value**, enter `query_param`.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-5fdcd56f32db3b75794bc2a785784862d1c7af37%2Fquickstart-v181-8.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

5. Click **Run** to submit the HTTP Request and see the results. Note that all of the returned Objects in the List have the value "Basics" for `product_collection`.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-5a9b985e6674c78d49ec21addf87f0f205e198d5%2Fquickstart-v181-9.png?alt=media)

6. Click on the 'Save' icon to the upper left of the Studio to save your progress.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-5f3d3f8a4899e4377556d2241833f705b8423bce%2Fquickstart-v181-10.png?alt=media)

> 🚧 Save your work frequently! Save your work frequently, so you don't have to worry about losing progress by accident. Click the Save button on the upper left of the Studio, or use the usual keyboard shortcuts: CMD + S or CTRL + S.

### Transform Collected Data and Define Output

The HTTP Request we've configured returns a List of Objects. We're going to configure our Data Flow to return only a single random Object from the result.

1. In the Stage, Click on the '+' icon between the **HTTP Request** Data Operation and the **End**. In the selection menu that pops up, select **Transform**.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-4ed8ffb1a2b918c52af883574c0f57312be3fab2%2Fquickstart-v181-11.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

2. A [Transform](../data-operations/the-transform-data-operation) Data Operation will appear between the **HTTP Request** Data Operation and the **End**. Under **Transform Expression**, enter the following Airscript expression:

```javascript
result[
    RANDOM(0, LENGTH(result), TRUE)
  ]
```

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-0464b0f400b866579e258360e90b0422bf78ac3d%2Fquickstart-v181-12.png?alt=media)

This uses the Airscript functions [RANDOM](../airscript-expressions/math-functions/random) and [LENGTH](../airscript-expressions/list-functions/length) to pull a random object from the from the list of objects given by the `result` returned by the upstream HTTP Request.

> 📘 Use dot notation to reference Lists and Objects. Airscript references Lists and Objects using [dot notation](https://goessner.net/articles/JsonPath/). List indexing begins at zero. For instance, if we wanted only the first Object given in the List, rather than a random Object, we would refer to `result[0]`. If we wanted only the `product_name` attribute given by the first Object in the List, we would refer to `result[0].product_name`.

3. Click **Run** to evaluate the Airscript expression. The value of the evaluated Airscript expression will now be accessible within the Data Flow as `transform`.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-351adfc0e84d6bf203cc2bb82bbec8498b13980d%2Fquickstart-v181-13.png?alt=media)

4. In the **End** block, under **Return Value**, select `transform` as the output of this Data Flow.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-ec44311647a4d751a40fd7772c494e1bfe262a30%2Fquickstart-v181-14.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

> 📘 Managing variables within a Data Flow As Data Operations are added to a Data Flow, they automatically generate internal variables to store values returned after running the Data Operation. These internal variables are only accessible within the Data Flow, and they are managed within the rightmost Inspector, where they can be both viewed and renamed.
>
> Variables generated by a Data Operation can be accessed by all subsequent Data Operations.
>
> For more working with data within Data Flows, see [Data Flows](../studio/data-flows).

## Define a Global Variable

Now that we've created a Data Flow that both accepts input and returns output, we need to create a variable that allows us to store the output so that it can be accessed outside of the context of the Data Flow.

1. Open the [**Variable Tree**](../studio/variable-tree) by clicking on the **Variables** button at the bottom left of the Stage.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-962494f9ad81a3faece83091b31eaa5d80e3a885%2Fquickstart-v181-15.png?alt=media)

2. Create a new global variable by selecting **Global Variables** from the leftmost column and then clicking on the '+' icon to the upper right of the middle column. Select the data type **Any**.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-0fd1559dc3f8cfd5eaa6c925a5c46553f2bff045%2Fquickstart-v181-16.png?alt=media)

3. Rename this new variable something more intuitive: `product`.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-d695ed23af15f9be737f2963e8ca80d00e1eb538%2Fquickstart-v181-17.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

Because this is a Global variable, it can now be accessed throughout the application Journey under the namespace `session.product`.

> 📘 Accessing variables All variables within a Journey have an associated namespace, which defines where the variable is stored, as well as how and when the variable is accessible. This places limitations on the scope of individual variables, which is important for the sake of both security and application efficiency. For more information on how to store and access variables of different scopes, see [Variable Namespaces](../data-and-integrations/variable-namespaces).

4. Ultimately, the variable `product` is going to be used to store the data returned from our Data Flow, but it's not hooked up yet. In the meantime, however, we can copy some sample data into this variable as a placeholder. Copy/paste the result of your Transform Data Operation into the rightmost column of the Variable Tree:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-8ef290abdeee57dbd75be344dd4bd76f638f5024%2Fquickstart-v181-18.png?alt=media)

This will serve as an example value similar to the example values used as input in the Data Flow.

> 🚧 Example values are for testing purposes only The dummy values given here are **not** default values, and they will **not** be used in production, but they **will** be useful for testing purposes while building within the Studio.

5. Save your progress.

## Run the Data Flow from a UI

1. Toggle over to **Web Flows** Builder. Select **Create a Blank Web Flow**.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-a98fa77954b1cb388915b05d9ac3adb21f4c2a97%2Fquickstart-v181-19.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

2. Add a **Label** Web Control to your Web Page by clicking on the **Label** button on the Toolbar above the Stage.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-ea81ba1fb7a78db6db2ae498f4b876b93edac5f8%2Fquickstart-v181-20.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

3. Double-click on the text the appears in order to edit it. Replace "Label" with "What collection would you like to view a product from?" Note how this also changes the text in the Tree and the Inspector.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-fa337c9acce41656373559238d852dc562b29e99%2Fquickstart-v181-21.png?alt=media)

4. You can also add Web Controls from the Tree by clicking on the '+' icon to the right of the **Web Page** you're building. Add a **Dropdown List** Web Control this way.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-6f8a3cf53c1ec9b09723a2751fd869f0243e710a%2Fquickstart-v181-22.png?alt=media)

5. The [Dropdown List](../web-controls/dropdown-list-web-control) Web Control allows users to select from a finite list of options. In the Inspector, under **Databinding > Type of List**, select **Custom Expression** to define the options programatically.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-c1c726626e210d803223f612a8e07295b07ac57d%2Fquickstart-v181-23.png?alt=media)

6. Under the **Data** section that appears, enter the following List of strings: `[ "All", "Basics", "Ultramodern" ]`. Note how this impacts the appearance of the Web Control in the Stage:

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-097926be857ec5a3ee634baeb8e291f3a39d3220%2Fquickstart-v181-24.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

7. While continuing to Inspect the Dropdown List, toggle from the **General** Tab to the **Action** Tab. Click on the '+' icon to the right of **Value Changed** and add a **Run Data Flow** Action from the selection menu.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-449d82b215f1f461726a1548ccf1d3f6165555dd%2Fquickstart-v181-25.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

8. Configure the **Run Data Flow** Action so that it runs your Data Flow using `dropdown_list` as input and binds the output to `session.product`:
   1. Under **Data Flow**, select **Data Flow**
   2. Under **Inputs** > `query_param`, enter `dropdown_list`
   3. Under **Output Binding**, enter `session.product`

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-805ccff972977b50f6d681e45193683e2130523b%2Fquickstart-v181-26.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

9. Save your progress.

## Display the Data

We have now built a UI that collect user input and uses it to define a local variable, `session.product`, based on data pulled from an external API. Next, we'll configure the UI so that it also displays some of the collected data when appropriate.

1. Add another **Label** Web Control. In the Inspector, under **Style > Variant**, select the Variant **headingMedium** to change the styling on the Label.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-51ee17413b1918428f20892b5b6c6d8a1ed1bc08%2Fquickstart-v181-27.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

> 📘 Variants are styling defaults that can be edited in the Theme Builder. A Variant is a set of styling properties for a specific [Web Control](../web-controls/web-controls-overview), similar to a class in CSS. Every Web Control has associated Variants: cosmetic variations that appear differently but function identically. There are a variety of Variant options that come out of the box; they can also be created and edited in [Theme Builder](../../studio/builder-bar/theme-builder#theme).

2. While still Inspecting the Label, expand the text box under **Control Properties > Text** and enter the following Airscript expression:

```javascript
IF(
  session.product
    = NULL,
  "You have not selected a product yet.", "Here is a product from the {{session.product.product_collection}} collection:"
)
```

This uses the Airscript function [IF](../airscript-expressions/conditional-functions/if) to display different strings in the Label Web Control depending on whether or not a value has been tied to `session.product`. It also uses dot notation to reference the `product_collection` attribute of `session.product`.

Note how this changes the Label's appearance in the Stage; for testing purposes, it evaluates the Airscript expression using the sample value tied to the `product` variable in the Variable Tree:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-c2ae3716303fd496062b25aaa15eaaa355ab2bc7%2Fquickstart-v181-28.png?alt=media)

> 📘 Use double curly brackets to designate Airscript expressions in strings. To reference a variable or other Airscript expression within a string, designate the Airscript expression in double curly brackets, and the Airscript expression will be evaluated before the string is displayed.

3. Insert another **Label**, expand the text box under **Control Properties > Text** and enter the following Airscript expression: `session.product.product_name`.

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-ca9297ecf13297a7d4c3a76f1415286288539178%2Fquickstart-v181-29.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

4. Insert another **Label**, expand the text box under **Control Properties > Text** and enter the following Airscript expression: `"Price: {{FORMAT_CURRENCY(session.product.price)}}"`. This takes advantage of the fact that the `price` attribute of `session.product` is a special data type called a [Currency](../variable-data-types/the-currency-variable-data-type) object, which can be turned into a string that's more intuitive for non-technical users to parse with the function [FORMAT\_CURRENCY](../airscript-expressions/currency-functions/format_currency).

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-c3f3bd97dbc0b7e2f30024c23ec4f46248d6f65c%2Fquickstart-v181-30.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

5. Save your progress.

## Fire Actions with a Button

1. Add a **Button** Web Control. Under **Control Properties > Text**, enter the string "Give me a different product." Note how this changes the button's appearance:

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-7271ee0feec266350b7e607150ee2916c87b5d36%2Fquickstart-v181-31.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

2. While continuing to Inspect the Button, toggle from the **General** Tab to the **Action** Tab. Click on the '+' icon to the right of **Value Clicked** and add a **Run Data Flow** Action from the selection menu. Configure the **Run Data Flow** Action so that it runs your Data Flow using `dropdown_list` as input and binds the output to `session.product`:
   1. Under **Data Flow**, select **Data Flow**
   2. Under **Inputs** > `query_param`, enter `dropdown_list`
   3. Under **Output Binding**, enter `session.product`

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-f37f9e172b930c8d4f983bc1d0926d392a3d2426%2Fquickstart-v181-32.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

3. Save your progress

## Link to the UI

1. Toggle back over to **Journey** Builder. Drag the **Visit a Link** icon from **Triggers > User Interactions** on the left side of the screen to **Triggers** in the Stage on the right.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-3d4d376692a260fc0992f714ee0c08c1640a2b8e%2Fquickstart-v181-33.png?alt=media)

2. Under **Journey Steps**, turn your attention to the **Step 1** box. In **Web Flow Starts**, select the Web Flow you just built out.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-97fa4a3eb4285dd9bbdd07bf30e4402c9d288b20%2Fquickstart-v181-34.png?alt=media)

You've now set up an entry point for your application and defined a Web Flow for it to lead to

3. Save your progress.

## Preview your digital Journey

[Previewing](../studio/app-preview) your application fully emulates everything you've built out so far, allowing you to test all components of your digital experiences.

> 📘 To ensure your App Preview will emulate all components of your app build, you'll need to save your app before Previewing; if you don't, you will receive a reminder to do so upon clicking the **Preview** button.

1. Click on the **Preview** button to the upper right of the Studio.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-ab30ecdeb17d60faa48b29e89d59868811fc66de%2Fquickstart-v181-35.png?alt=media)

2. App Preview will open in a separate tab. To emulate accessing your application by clicking on a link, click on the Web icon to the bottom right of the leftmost Previews Window:

<figure><img src="https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-927078e91f81502bc92a9fb63c4cafa3c6900fbb%2Fquickstart-v181-36.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

Clicking on this icon simulates the process of starting a digital Journey by clicking a link.

Simulating your application flow before its published makes it easier to test and debug as you build. To learn more about what's going on under the hood of your application as a simulated Journey progresses, click on the double arrow icon to the upper right part of the Device Preview Window to open the Event and State Viewers:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-b40b47340c78386331336d7c00a6413db2e7364f%2Fquickstart-v181-37.png?alt=media)

If any errors have been thrown during your simulated Journey, they will be marked in red.

## Publish your Application

To publish your application, click on the "Publish" button on the upper right to the Studio. In the pop-up window that appears, click the "Publish" button. This will provide a Starting Link that can be used to navigate to the web experience that you just built out.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-d8517f40101b2db60374500c2333f563a7b82104%2Fquickstart-v181-38.png?alt=media)

> 📘 The Starting Link automatically generated here uses Airkit's default domain. For more on how to create a white-label URL to link to your applications, see [Publishing Your Application](../building-apps/publishing/publishing-your-application).

Congratulations! You've just built and published your first Airkit app!

## What's next?

Now that you've learned the basics, what you build next is up to you!

### I want to work with more complex integrations!

You've already used Airkit to make a simple HTTP request, but Airkit's abilities to connect to external systems go far beyond that. Whether you're looking pull in data, updating existing records, or catch incoming requests, Airkit provides multiple ways to do so securely. Here are some resources to get you started:

**Prefer to learn by building?** 🛠️ Check out this long-form tutorial:

### I want to build an app that spans multiple channels!

Airkit apps are designed to span multiple channels, include web pages, phone calls, and SMS conversations. By tying every channel to a single **Journey** and associating each Journey with an **Actor**, context is automatically maintained while switching between channels. These are powerful concepts that it's important to understand at their root, so here are some discussions to get you started:

**Prefer to learn by building?** 🛠️ Check out this long-form tutorial:

### I want to make my apps look nicer!

The visual components of your applications are entirely customizable. Individual Web Controls can be styled in the Inspector, or you can edit Themes to make stylistic changes that apply across your entire application. Existing resources, including pictures, gifs, and fonts, can be uploaded to the [Media Library](../studio/builder-bar/media-library) and used to further customize your UI. Here are some resources to get started:

**Prefer to learn by building?** 🛠️ Check out this long-form tutorial:
