Blog

How to Integrate Thunkable With Backendless

by on

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 Backendless backend with your Thunkable app, you get a real-time databaseuser managementbulletproof security, highly-scalable serverless hosting, and much more.

A successful app requires much more than just an impressive user interface. Most apps will be supported by their backend, including servers, 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 offers fantastic UI development tools, but for all the strengths the platform offers on the frontend, it’s backend capabilities are lacking.

That’s where Backendless comes in.

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

The Thunkable-Backendless Stack

In this article, we’re going to walk you through the process of integrating the several basic Backendless functions into your Thunkable app (click to jump to each section):

The above items merely scratch the surface of the benefits of connecting your Thunkable app to Backendless. You will also gain access to:

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

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.

First, let’s create a new page with two Text Input components with identifiers EmailInput (KeyboardType: email address) and PasswordInput (Advanced – SecureTextEntry: true), a button RegisterUserButton, and an Alert RegistrationResultAlert:

In the RegistrationResultAlert settings, clear the values ​​of all fields and leave only one CancelButton to close the message:

Connect To Backend Via API

We will also add a Web API (Add Components – Web API) component for user registration and name it RegisterUserAPI.

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 on the left panel, select Variables – initialize app variable to:

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 on the left panel, select Functions and then select a block with a function that returns nothing.

The logic of the alert display function is as follows:

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 on the left panel:

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

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

In the panel on the left, select RegisterUserAPI and select the blocks for setting the URL https://api.backendless.com/APP_ID/REST_API_KEY/users/register, headers and request body.

Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard. Additionally, 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:

Testing

Let’s go back to the Design tab. In the upper right corner, click on the Preview button, enter the email and password of a new user and click Register User:

(NOTE: At time of writing, there is a bug with displaying the password. Although SecureTextEntry = true, the password is still not hidden, although it should be hidden according to the Thunkable documentation).

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

If an error occurred during registration (for example, they tried to register an existing user), then we will receive the following notification:

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 PasswordInput identifiers (Advanced – SecureTextEntry: true), a LoginButton button, and the LoginResultAlert Alert:

In the LoginResultAlert settings, clear the values ​​of all fields and leave only one CancelButton to close the message:

Connect To Backend Via API

We will also add a Web API (Add Components – Web API) component for the user login and name it LoginAPI.

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 PasswordInput:

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:

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 PasswordInput fields.

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

Set the login and password variables to the values ​​from the LoginInput 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.

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

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

In the left pane, select LoginAPI and select blocks for setting the URL https://api.backendless.com/APP_ID/REST_API_KEY/users/login, headers and request body.

Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard. Additionally, note that the request body is a JSON object with login and password parameters, the values ​​of which we took from the LoginInput and PasswordInput 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:

Testing

Let’s return to the Design tab. In the upper right corner, click on the Preview button, enter the login and password of a new user and click Login:

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

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

Save 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 (KeyboardType: numeric), a button SaveButton and Alert SaveResultAlert:

In the SaveResultAlert settings, clear the values ​​of all fields and leave only one CancelButton to close the message:

Connect To Backend Via API

Also add a Web API (Add Components – Web API) component to save the object and name it SaveObjectAPI.

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:

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:

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

In the left pane, select SaveObjectAPI and select blocks for setting the URL https://api.backendless.com/APP_ID/REST_API_KEY/data/Person, headers and the request body.

Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard. Additionally, 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

Let’s go back to the Design tab. In the upper right corner, click on the Preview button, enter the name and age of the object and click Save:

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

 

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:

Connect To Backend Via API

We will also add a Web API (Add Components – Web API) component for selecting objects and name it FindAPI.

Now let’s go to the Blocks tab and 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.

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

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

In the panel on the left, select FindAPI and select blocks for setting the URL https://api.backendless.com/APP_ID/REST_API_KEY/data/Person, headers and parameters. Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

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

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 we form the string "Name:" + person.name + ", age:" + person.age

and add it to the resultsArray:

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

Testing

Our logic is ready. Let’s return to the Design tab. In the upper right corner, click on the Preview button, optionally enter a where clause and click Find:

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:


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!

Leave a Reply