Blog/Developer/Developing with Airkit: How to Build an App in 5 Minutes

Written by Fabian Frank, VP of Engineering

At Airkit we talk a lot about the ease of building great digital experiences on our low-code platform, so today we’re going to show you how to create an app in under 5 minutes. 

We’ll start with a quick look at the Airkit. Let’s get building!

The Airkit Console

Below is a picture of the Airkit console. The console is where you manage your apps, connect domains in order to run apps on them, and integrate with other tools or systems such as Salesforce. 

Airkit Console

We have already created an app called Gif Demo in Airkit Studio. However, if you’d like to learn about starting from scratch, you can review Lesson 1: Creating an App on our developer site. 

Airkit Studio

Welcome to Airkit Studio! Studio is Airkit’s application development environment, pictured below. On the left of the Studio interface are all builders available in Airkit. For this example, we’re focused mainly on the App and Connection Builders. 

Airkit Studio

We’ll start off in App Builder to create the user interface for our app. In this case, our app will have a single screen that allows the user to search for animated images, or gifs. A little later on we’ll switch over to Data Builder, where we can build a data operation in order to call the external API that allows the user to search for gifs. 

On the left-hand side you can see an outline of the screens in our app, as well as their UI elements, as we expand them. We use it to navigate between screens and elements as we edit our app. New Airkit apps already contain an empty screen with a “hello world” label by default. You can alter this default text on the right side of the screen. For the purpose of this exercise, we’ll enter “Airkit Gif Kit.”

Airkit Inspector

On the left, you’ll also see the string input for the search query, the button to kick off the search, and the image control to display the image. 

App Builder

String inputs require a variable to store the text a user enters. You can enter your variable name on the right-hand side of the Studio under “Card View.” Since we will also need a variable later for our gif URL, we can add that label now as well. 

Variable View

Let’s have our string input store our text in this search term variable. Then we connect our image control to the gif URL variable. Learn more about adding components here

Here’s a neat trick with the “OR” operator. The “OR” operator will evaluate to the left-hand side when a gifUrl is present or to the default value on the right-hand side otherwise.

OR Operator

Now that a default image is in place, adjust dimensions to 500 x 500 pixels.

Next, let’s jump over to the Data Builder on the left side of the Studio. We will create a new data operation called “Search Gif,” starting with an HTTP request. 

Data Operation

Next, we select our Giphy service, configured prior to this session, so that our API key will be automatically attached to all requests. That way we can configure the correct URL as well as a query parameter to run the search. Watch this video to dive deeper into the integration process.

Data Operation Continued

Notice that I am also adding an input to my data operation so that callers can pass in any search term they want. We can test these steps as we build them in order to generate sample responses. 

Data Operation Results

Now that I can see the response data, I add a transform step to pick the correct URL from the Giphy results. Return it, and then hop back into Application Builder. 

Add Action

Here we reopen the inspector of our button control, and under actions, add the run data operation action in response to the click event. This action will run the data operation that we just created, using the search term that the user provided. It will then store the result in the gif URL variable.

Remember our 2 variables, search term and gif URL. “Search term” will be the search input, and the result of the search will be stored in “gif URL.”

Finished Action

Let’s switch over to Theme Builder and dial in our branding. On the right-hand side of Theme Builder, you have the ability to choose all element colors. 

Theme Builder

After approximately 5 minutes of development, we’re ready to launch our app! When we press “Start” in the upper right hand corner of the Airkit Debugger, we’re able to test the flow and build out of our app. 

Airkit Debugger

If there are no issues with your app, you’re ready to officially launch! Congrats on building an application in 5 minutes. You can watch the full app-building process here.

Looking for more?

See our Demo Center.

View demos

See what Airkit has to offer.

Sign up for a free account!

Start free