The Ultimate Guide to Thunkable: Features and How to Get Started

Thumbnail image for "Blogs" article

Table of contents

What is Thunkable used for?

Thunkable is a no-code native mobile app builder, with a unique drag-and-drop system for programming and creating your app.

 It is an app development platform to design, develop, and deploy mobile-first experiences for Android iOS, and the web without having to write a single line of code while making app development accessible to everyone.

Image:  Thunkable - Home Page
Thunkable - Home Page

Thunkable best meets your needs if you are

  • Focused on a mobile-first experience
  • Want to create apps for phones and tablets
  • Need to go from idea to minimum viable product in days, not months
  • Want to create a native mobile experience by tapping into the device’s native capabilities like sensors, Bluetooth, camera, offline abilities, and more
  • Require integrations with third-party data sources
  • Want complete control over UI customizations
  • Need to create a custom logic with simple drag-and-drop blocks
  • Want to live test your app directly on your device
  • Want a single project to be deployed to three different platforms
  • Want to monetize your app with ads and in-app purchases
  • Want to be part of a global user base of citizen developers\

If you want to learn more about Thunkable or read an external overview you should check our other articles about Thunkable:

Getting Started with Thunkable

First things First, in order to use the Thunkable platform you need to create an account that will give you access to its features.

Just press the get started button in the home page and follow along with the instructions.

Step 1: Sign up with the email address of your choosing (google account, Apple ID, other email).

Step 2: Answer the questions given to you, these are to determine your experience and level of app building.

Step 3: Welcome to the UI of Thunkable.

Image:  Thunkable - Dashboard
Thunkable - Dashboard

Building your first Thunkable project

Let’s Create an Employee Directory App

In this guide, we will create an employee directory app using Thunkable.

First, let's create the basic screens for our app by using the drag-and-drop method and building a basic text page for our main screen. This is where the list of the employees will be shown.

Then we will create a second screen which will be filled with each employee’s information automatically using variables.

Image:  Thunkable - Editor
Thunkable - Editor

Let’s now create a Google sheet which our app will get its employee data from. 

Now go to the data tab on the bottom left of the design page select “Data viewer list” and connect your Google sheet spreadsheet from the right menus. 

Pick a style you wish your data will be shown and move things around to your liking.

Image:  Thunkable - Data View
Thunkable - Data View

Your page should say Title and Subtitle. From the “Get Title property from column” and the “Get Subtitle property from column” select what you wish to be displayed, I suggest the Name of the employee as a title and their department as a subtitle.

Drag and Drop interface

Thunkable’s drag-and-drop interface opens up the world of app development to individuals regardless of their computer programming background by allowing them to build software solutions without needing to understand the engineering mechanisms behind coding.

Image:  Thunkable - Drag and Drop Editor
Thunkable - Drag and Drop Editor

Simple Programming with blocks

Let’s now program our app to work. The idea is that when you click on an employee it should automatically direct you to their information page. To do that we will go to the Blocks page and create a short program like this:

Image:  Thunkable - Programming With Blocks
Thunkable - Programming With Blocks

We’ll go through each block together. 

First, from the variables tab, we will select the “initialize app variable name to” block and place next to it the create object block from the objects tab. This way we have created a variable. 

A variable is an abstract storage location paired with an associated symbolic name, which contains some known or unknown quantity of data or object referred to as a value; 

Next, we want to assign a value to our variable, and more specifically the:

  • Name
  • Title
  • Email
  • Department of the employees

 To do that we will set the variable to change between the different Google Sheets rows by placing a set “variable” to command inside a block that activates when the user clicks on the employee, this command is found on the data viewer list blocks.

 Then find the get row object from the command from the objects tab and place the row ID in it from the above command. Be sure you have selected the right sheet.

Lastly, we want our last command to direct us to another screen with a detailed view of the employee. To do that we will place inside the first command the “navigate to (screen)”.

Image:  Thunkable - Example Program Blocks
Thunkable - Example Program Blocks

Now we will create another command that changes this screen’s information according to which employee it should showcase. 

To do that, get the ‘when (screen) opens’ command and place it inside the actions you want to happen. In our case we want to change the name, email, department, and title labels, that's 4 different commands inside the initial open command.

 Navigate to each label’s command from the top left and select the “set ‘label’ ‘text’ to” command with the “get property of the object” command from the objects tab.

In each object command you should put the name of the Google sheet row you want to get data from and the variable we created earlier.

Final outcome 

The preview of our finished app looks like this. We can see on the first screen a list of employees and when you click on one you’re redirected to the second screen with their information. 

You don’t need to create different screens for the different employees as the app changes the second screen according to the employee. 

Also, you can change each person’s info from the Google Sheets spreadsheet and it will automatically change in the app.

Image: Thunkable - Example Preview 1
Thunkable - Example Preview 1
Image: Thunkable - Example Preview 2
Thunkable - Example Preview 2

Thunkable useful tips and tricks

If you are looking to unlock the full potential of the platform or even upgrade your skills and level of understanding the official website provides many solutions such as:

Thunkable Academy which is Thunkable's self-paced learning environment. With videos that cover the basics and best practices to start, and more advanced content coming soon.

Thunkable Academy is designed to help you quickly and effectively create your custom, native mobile applications.

You can find more videos and tutorials on Thunkable’s YouTube Channel. More help about Thunkable can be found.

Thunkable comes with its free plan, to help you get started building your native, no-code app, available to all users that sign up to the website. 

Unfortunately with the free and starter plans you cannot publish an app.

You can of course upgrade to a different plan according to your needs. Keep in mind that for your app to be published to an app store so people can download it is through the Pro plan or the Business plan.

Image: Thunkable - Membership Plans
Thunkable - Membership Plans

Conclusion

Thunkable is an easy-to-use native mobile app builder that uses no code to help you create an app without the need to know how to code. Its environment is very user-friendly and not complicated to understand. 

Thunkable is here to help you understand the world of app building and make you feel at home.

If this article has piqued your interest, we recommend checking out our comprehensive overview of Thunkable. You can also dive into our detailed instructions on how to learn to maximize the benefits of this platform.