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. 

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. 

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

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. 

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. 

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.

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. 

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.

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. 

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. 

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

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. 

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. 

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.