Blog

How to Integrate a Thunkable App Frontend With a Backendless Backend

by on February 14, 2023

Integrate Thunkable With Backendless Feature

Thunkable is a no-code app builder specializing in iOS and Android mobile apps. When you integrate a feature-rich no-code Backendless backend with your Thunkable app, you get a visual relational databaseuser managementbulletproof security, highly-scalable serverless hosting, and much more.

Building a mobile or web app used to be an enormous undertaking. Creating apps, or digital products as they are sometimes called, required lots of technical knowledge and many months – even years – of dedicated development time.

The no-code movement has changed that. Now, with no-code tools like Backendless and Thunkable, non-technical builders can learn and build apps in months or even weeks. Those with technical knowledge can turn a six month project into a six week project.

In this article, we are going to briefly introduce you to Thunkable, a leading no-code development platform that provides a robust toolkit for building apps visually. Then, we will describe how to add a powerful and scalable Backendless backend to complement a Thunkable frontend.

Try Backendless + Thunkable For Free*

Strengthen your Thunkable backend by adding Backendless today. Start for free today.

Table of Contents

What is Thunkable?

Thunkable is a platform for building native mobile apps and web apps visually using a drag-and-drop interface and workflow builder. Thunkable offers wide user interface design capabilities without code, including animations.

Thunkable provides an excellent toolkit for building relatively simple applications, and thus greatly appeals to new developers with little or no coding experience. With the platform, users can build functioning apps very quickly and easily iterate with new features over time.

Because of these capabilities, Thunkable is a popular choice for non-technical developers seeking to build native apps. Many such users include non-technical entrepreneurs with app-based business ideas and technical startup founders seeking to quickly build a minimum viable product (MVP).

Thunkable’s simplicity can be easily complemented with it’s variety of integrations. Users can add additional tools not included in Thunkable’s toolkit to increase their app’s capabilities.

Frontend vs backend development – and why it matters

From a high-level perspective, an application’s frontend is what the end user or customer will interact with. This may be an app on their mobile device, an interactive website, or a piece of software. The backend of an application is where long-term data is stored and much of the “heavy lifting” occurs.

An application’s speed and usability, and thus the user experience, is dependent on the processing power of the device where computations occur. Apps built with a beautiful frontend will get little traction if the app is painfully slow.

That is why it is recommended that as much of the logic as possible be stored on the backend. A typical server – include Cloud servers – contains far more processing power than a typical mobile phone, tablet, or laptop.

Similarly, the capabilities of the backend will be essential to growth and scale. Developers should be careful to disregard backend development because that is where the bulk of user experience failures occur.

A solid backend should not only include a database, but should offer the ability to create backend logic, build and access APIs, provide ample storage for files, images, and videos, and support messaging and notification systems.

Benefits of adding a Backendless backend and database

We’ve now established that a successful app requires much more than just an impressive user interface. Most apps will be supported by their backend, including servers (hosting), data storage, user management, and in many cases, logic.

The more capable an app’s backend, the more effective the app and the better the user experience.

Thunkable boasts millions of creators are utilizing their no-code mobile app development platform, but for all the strengths the platform offers on the frontend, it’s backend capabilities – and particularly database features – are lacking.

Thunkable offers fantastic no-code UI development tools. For all the strengths the platform offers on the frontend, however, it’s backend capabilities are limited.

That’s where Backendless comes in.

With a powerful visual database, huge assortment of pre-built APIs and the capability to build your own codeless APIs, Backendless easily fills in all the backend gaps in your Thunkable app.

For developers looking to build a long-term product, Backendless is critical. Backendless scales infinitely out of the box, meaning you never need to worry about your server infrastructure holding up under heavy traffic. Additionally, you can host your app on Backendless’ cloud servers in the United States or European Union (perfect for GDPR compliance) or on your own on-premise servers.

From a feature standpoint, Backendless provides the most complete no-code backend capabilities on the market. In this article, we will discuss some of the basics – user authentication (registration and login) and database manipulation. However, that merely scratches the surface of what Backendless has to offer.

Other features your Thunkable app will benefit from include:

How to integrate a Thunkable app with a Backendless backend

From this point on, we will be demonstrating how to integrate Thunkable with Backendless. In this article, we’re going to walk you through the process of integrating several basic backend functions into your Thunkable app (click to jump to each section):

To get started, you will need a Thunkable account as well as a Backendless account (register here for free).

Note: The simplest way to access Backendless’ robust backend features is to build your frontend with Backendless as well. Be sure to check out our no-code UI Builder to see how it stacks up to Thunkable.

User Registration With Backendless

User registration and login enable your app to personalize the user’s experience.

User login opens up the entire set of user management functions in Backendless. These include session management, password management, user roles, and relating user to other data objects.

User registration also opens up user engagement opportunities such as email messagingpush notifications, and in-app messaging.

Let’s get started.

We’ll start by setting up user registration in Thunkable, connected to Backendless.

First, let’s create a new page with two Text Input components with identifiers EmailInput (Keyboard type: email address) and PasswordInput (with SecureText Entry option enabled) and a button RegisterUserButton. These components can be found in the Design tab.

 

Create registration screen in Thunkable

Also add an Alert RegistrationResultAlert from the Blocks tab. In the RegistrationResultAlert settings, clear the values ​​of all fields and leave only one CancelButton to close the message:

Registration result alert in Thunkable

Connect Thunkable To Backend Via API

We will also add a Web API (Blocks – Advanced – Web APIs) component for user registration and name it RegisterUserAPI. Configure it with the corresponding URL and headers:

Register user Web API with Backendless in Thunkable

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/users/register (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/register for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Now let’s go to the Blocks tab and add logic for registering a user by clicking on the Register User button.

First, let’s add two variables to our application – email and password – and set their values to null. In the future, these values will be taken from the corresponding EmailInput and PasswordInput. To create a variable, in the Blocks tab select CoreVariables – initialize app variable to:

Create registration variables in Thunkable

Next, let’s add the showAlert function to display the Alert. This takes email and errorMessage as parameters and, depending on the parameter, displays the desired message. To add a function in the Blocks tab select CoreFunctions and then select a block with a function that returns nothing.

The logic of the alert display function is as follows:

Alert display function in Thunkable

We check if the value was passed to the function email. This option for the alert will be relevant if the user is successfully registered. If the registration is successful, set the success message in the Title and Message alert.

If email = null, then an error has occurred. In this case, set an error message in Title and Message of the alert.

After setting the values in Title and Message, we call the alert display, after which we clear the EmailInput and PasswordInput fields.

To interact with the Alert, select RegistrationResultAlert in the Blocks – App Features – Alerts:

Registration result alert blocks in Thunkable

Now let’s return to the click handler for the registration button. On the left panel, select RegisterUserButton – Click.

Registration result alert click handler in Thunkable

Set the email and password variables to the values from the EmailInput and PasswordInput fields. If one of the fields is not filled in, we call the function to display an alert with a request to enter the correct values for email and password.

Note above that we are passing null to the showAlert function’s email argument.

If both values are entered, then you can call the user registration method (docs).

Call Backendless user registration API from Thunkable

In the Blocks tab, select Advanced – Web APIs – RegisterUserAPI and select the blocks for setting the request body.

Note that the request body is a JSON object with the email and password parameters, the values of which we took from the EmailInput and PasswordInput fields.

After setting up the API, we call RegisterUserAPI Post. If successful, the result will be an object containing the registered user. Otherwise, we receive an error.

Regardless of the result, we form an object from the response and pass the values email ​​(will be null in case of unsuccessful registration) and message (will be null in case of successful registration) to the showAlert function.

Thus, depending on the result, we will receive either a message about successful registration or an error.

The final version of the logic looks like this:

Full user registration logic calling Backendless API from Thunkable

Testing

In the upper right corner, click on the Web Preview button, enter the email and password of a new user and click Register User:

Register user screen preview in Thunkable

If the registration was successful, we will receive a message about successful registration:

Successful user registration alert in Thunkable

If an error occurred during registration (for example, an attempt was made to register an existing user), we will receive the following notification:

User login screen preview in Thunkable

With that, user registration is complete. Now let’s move to logging in the user.

Login With Backendless

For the Login page, we need two Text Input components with the LoginInput and PasswordInput1 (with SecureText Entry option enabled) identifiers and a LoginButton. These components can be found in the Design tab:

Create user login screen in Thunkable

Also add an Alert LoginResultAlert from the Blocks tab. In the LoginResultAlert settings, clear the values ​​of all fields and leave only one CancelButton to close the message:

Login result alert in Thunkable

Connect Thunkable To Backend Via API

We will also add a Web API component from the Blocks tab (Advanced – Web APIs) for the user login and name it LoginAPI. Configure it with the corresponding URL and parameters:

Login Web API to Backendless from Thunkable

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/users/login (or EU-https://api.backendless.com/APP_ID/REST_API_KEY/users/login for the EU cluster).

Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Now let’s go to the Blocks tab and add logic for the user’s login by clicking on the Login button.

First, let’s add two variables to our application – login and password – and set their values to null. In the future, these values will be taken from the corresponding LoginInput and PasswordInput1:

Create login variables in Thunkable

Let’s add the showAlert function to display our Alert. The Alert takes email and errorMessage as parameters and, depending on the parameter, displays the desired message:

Login alert display function in Thunkable

Similar to registration, we check whether the value of email was passed to the function. We’ll use this option for the alert if the login is successful. If the login is successful, set the success message in the Title and Message alert. (You can come back later to change this action to navigate to a home page or take another action appropriate for your app.)

If email = null, then an error has occurred. In this case, set an error message in Title and Message of the alert.

After setting the values in Title and Message, we call the alert display, after which we clear the LoginInput and PasswordInput1 fields.

Now let’s return to the login button click handler:

Login button click handler in Thunkable

Set the login and password variables to the values from the LoginInput and PasswordInput1 fields. If one of the fields is not filled in, we call the function to display an alert with a request to enter the correct values for email and password.

We pass null to the email argument of the showAlert function.

If both values are entered, then you can call the login method (docs).

For the LoginAPI, in the Blocks – Advanced – Web APIs tab, select blocks for setting the request body.

Note that the request body is a JSON object with login and password parameters, the values of which we took from the LoginInput and PasswordInput1 fields.

After setting up the API, we make a call to LoginAPI Post. If successful, the result will be an object of the logged in user. If the request fails, an error will be returned.

Regardless of the result, we form an object from the response and pass the email (it will be null in case of an unsuccessful login) and message (it will be null in case of a successful login) values to the showAlert function.

Thus, depending on the result, we will receive either a message about a successful login or an error. The final version of the logic looks like this:

Full user login via Backendless in Thunkable logic

Testing

In the upper right corner, click on the Web Preview button, enter the login and password of a new user and click Login:

User login screen preview in Thunkable

If the login was successful, we will receive a message about the success of the operation:

Successful user login alert in Thunkable

If an error occurred during login (for example, they tried to login with an incorrect password), then we will receive the following notification:

User login error alert in Thunkable

Save Thunkable App Data In Backendless

Backendless Database is what sets Backendless apart from every other no-code platform out there. Your database can store a wide range of data types (including spatial/geo data and JSON objects) and makes it trivially easy to create relations between objects.

Backendless Database uses a SQL-based querying system. (We will touch on that more in the next section.) This approach allows you to easily query your data and display exactly what you want the user to see.

To start working with our data, let’s first take a look at how to save data into our Backendless Database from Thunkable. Let’s build a simple new page to try it out.

For this example, we need two Input components with identifiers NameInput and AgeInput (keyboard type: numeric) and a button SaveButton:

Create data input save data screen in Thunkable

Also add an Alert SaveResultAlert, clear the values of all fields and leave only one CancelButton to close the message:

Save data result alert in Thunkable

Connect Thunkable To Backend Via API

Also add a Web API (Blocks – Advanced – Add Components – Web APIs) component to save the object and name it SaveObjectAPI:

Save Object API Web API to Backendless from Thunkable

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/data/Person (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/data/Person for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Next, let’s go to the Blocks tab and add logic to save the object by clicking the Save button. We will save the new object to the Person table.

Let’s add the showAlert function to display the Alert, which takes objectId and errorMessage as parameters and, depending on the parameter, displays the desired message:

Save data alert display function in Thunkable

We check if the objectId value was passed to the function. This option for the alert will be relevant if the save is successful. If the saving was successful, set the success message in the Title and Message alert.

If objectId = null, then an error has occurred – in this case, set the alert message to the error message in Title and Message. After setting those values, we call the alert display and then clear the NameInput and AgeInput fields.

Now let’s return to the click handler for save button:

Save data result alert click handler in Thunkable

By clicking on the Save button, we call the method for saving the object (docs).

Note that the request body is a JSON object with the name and age parameters, the values ​​of which we took from the NameInput and AgeInput fields.

After setting up the API, we make a call to SaveObjectAPI Post. The result will be a saved object if the query is successful, or an error if it fails.

Regardless of the result, we form an object from the response and pass the values objectId (will be null in case of unsuccessful saving) and message (will be null in case of successful saving) to the showAlert function.

Thus, depending on the result, we will receive either a message about the successful saving of the object, or an error.

Testing

In the upper right corner, click on the Preview button, enter the name and age of the object and click Save:

Save data screen preview in Thunkable

If the saving was successful, we will receive a message about the success of the operation:

Save data success alert in Thunkable

Run A Query In Backendless

Finally, let’s walk through how to retrieve data from your database by running a query. We will again create a simple page for demonstration.

We will need one Input component with the WhereClauseInput identifier, the FindButton button and the ResultsList List Viewer to display the search results (I set a light blue background to it):

Create database query screen in Thunkable

Connect Thunkable To Backend Via API

We will also add a Web API (as usual Blocks – Advanced – Web APIs) component for selecting objects. Name it FindAPI and change its settings:

Find data API Web API to Backendless from Thunkable

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/data/Person (or eu-https://api.backendless.com/APP_ID/REST_API_KEY/data/Person for the EU cluster).

Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Now let’s add logic for selecting by clicking on the Find button. The selection will be made from the Person table in our database.

Let’s create two variables – empty arrays named responseObjects and resultsArray.

  • responseObjects is an array of objects that we will receive as a result of the fetch request
  • resultsArray is an array that will be the data source for the ResultsList

Create data retrieval variables in Thunkable

Now let’s return to the click handler on the Find button:

Database query search button click handler in Thunkable

By clicking on the Find button, we clear the resultArray to clear the data of the previous search and call the data retrieval method (docs).

The where value for the conditional selection is taken from the WhereClauseInput field. This parameter is optional, and if not specified, all data will be selected.

After setting up the API, we call FindAPI Get. The result will be an array of objects that we convert from JSON and write to the app variable ResponseObjects.

After we have received the necessary objects, using the for…each loop, we go through this array and form the resultsArray. In the ResultsList, we will display the name and age of the received Person objects, so from each found object (if this object contains the name and age fields) we form the string "Name:" + person.name + ", age:" + person.age.

Thunkable block for creating a string from data in an array

and add it to the resultsArray:

Data retrieval results array block in Thunkable

After forming the resultsArray, we pass it to the ResultsList for display:

Pass results array to results list

Testing

Our logic is ready. In the upper right corner, click on the Web Preview button, optionally enter a where clause, and click Find:

Data retrieval screen preview with query parameters in Thunkable

As a result of a query with whereClause = 'age>25', we got a list of Person table objects with age greater than 25. If we execute a Find query without specifying a whereClause, we get a list of all objects:

Data retrieval screen preview without query parameters in Thunkable


Closing

You should now have a basic handle on how to interact with a Backendless backend via Thunkable, but this is just the tip of the iceberg. Adding a Backendless backend and database to a Thunkable mobile app gives your app incredible flexibility.

With Thunkable’s easy frontend interface and Backendless’ many pre-built APIs, your possibilities become endless.

In addition to managing users and data, Backendless gives you access to timers, event handlers, and whatever Codeless logic you can think of on the backend.

Your app is virtually limitless.

Thanks for reading and Happy Codeless Coding!

*Backendless Free Plan pricing only. Thunkable pricing may not be free.

Try Backendless + Thunkable For Free*

Strengthen your Thunkable backend by adding Backendless today. Start for free today.

Leave a Reply