Steps to create an Application using no-code platform : AppGyver and Airtable

In the earlier blog — https://medium.com/@maithilijoshi94/building-an-application-using-no-code-platform-appgyvr-35107ae2fdbe, I discussed the cases where no code platforms may prove to be useful and also compared developing applications using AppGyver with native android development.

This blogs gives a step by step guide to create an app using AppGyver and Airtable. This discusses a single page app with a UI screen and dynamic data binding using Airtable. Kindly let me know if you want to explore advanced settings like Navigation logic and theme styling.

Step 1 (Getting started)

Create an account in AppGyver. Then click on Create New App on the Composer Pro Dashboard. It provides us an option to choose default theme (this can be changed later). The product also gives an option to view demo tutorial videos which are quite useful.

Step 2 (Creating a UI screen)

You can start creating your first screen by dragging and dropping components from the lefthand side table. You can adjust the position and style attributes from the Right hand side table on the create screen page. You can also give the page a name. You can even add transitions and animations for each of the components.

Step 3 (Static Data Binding)

If you want to display static data then just select the component already added to your screen and enter the text in the Content panel for that component on the right hand side. You can try out different layouts and components, play around with positioning and style. This is the part that can help in creating quick mockups.

You can also select whether a component should repeat by selecting Repeat With.

Step 4 (Dynamic Data Binding using Airtable)

Here comes the main and the most important part of the App development process. If you have to bind a component to an API response then you will first have to add a Data Variable in the Data tab on Composer Pro.

Before adding data binding through REST API, let us create the data first in Airtable.

Step 4A — Create table and data in Airtable

To get started with Airtable, first create an account on https://airtable.com/. In the workspaces, choose add a base and start from scratch option.

Open the base added. This will open an Excel-like sheets where you can create multiple data entries. You can create a new table with some fields and add data there. You can go deeper by creating multiple tables and linking them. Here’s a screenshot for the basic table I created while trying out the app.

Step 4B — Rest API in Airtable

After creating the table, you can extract the API urls for the generated data by clicking on Help in the right hand corner and then API Documentation. This will open the page with all details for CRUD APIs (Create, Read, Update, Delete) with respect to the tables created.

You can also read about the rate limits for API calls and errors.

Step 4C — Adding Data to AppGyver Composer Pro

Clicking on the Data tab will open the Data Configurator. Choose add Data Resource → REST API Direct Integration.

On the page that opens, you can add the resource Id, the short description, the url (which you will get from Airtable API documentation) and the Headers (Authorization). Be sure you check that you are adding it to the Base tab.

Similarly you can add the specific parameters for get collection/ get record etc.

Step 4D — (Adding data to a page)

Once you have added the data resource to the Data tab, we have to integrate this data to this particular screen. So in the current page view, switch the toggle from View to Variables.

In that, add a data variable from Data Resource which we added in step 4C.

Our data is now added to this page and by default it will call the API on page Mount event. You can see the logic for data population by clicking on add logic to Your Page on the bottom bar.

Step 4E — (Binding data to Page)

To Bind any dynamic data to the page component, click on ABC button on the text component in the Properties Tab. For a list, you can select the component to repeat with a particular Data Variable.

Also for texts within the repeating component, you will get the option of adding a property of data item in repeat by clicking the button beside the static value.

Step 5 — Launching the application and testing

The earlier 4 steps complete our View UI, design and data binding logic. You can easily test the app screen you have built using AppGyver mobile app (it’s available both on Android and iOS). Simply login to your account and launch the app.

Advanced App Settings

Following the above steps will get a quick mockup/ screen set up for the app. Adding different screens and the navigation between them can be handled by the clicking on Add Logic to page. Here we are given predefined events like “Hide Spinner”, “Tap on component”, “Page mount” etc. We can then weave in the logic by dragging and dropping these events on the workspace and connecting them according to our own logic.

For example, the following navigation logic will take the user to a new page (Music Details Page) on tapping a particular component.

Overall you can get your app made and running within a few hours.

Hope you liked the tutorial. If you try out AppGyver or any other no code platforms for app building, do share your experience with me. Would love to get your recommendations and feedback.