Tools

Creating mobile apps with Thunkable

The following entry is NOT sponsored.

There are many programming-related things, I have tried at least once in my life such as web development, desktop development, cloud computing, functional programming, distributed computing, artificial intelligence, IoT, page styling with CSS (sic!) and many others. However, there’s one popular programming area I’ve never tried and I think I’ve been always scared of – mobile development. There are several reasons for that:

  • I’m not a smartphones freak
  • I still favor web over mobile
  • I don’t want to „waste” my time on discovering this area rather than developing myself in web development
  • I know neither Java nor Kotlin
  • I don’t know Xamarin

Every excuse is good here, right? But this is how it is. I’ve never done any mobile app which doesn’t mean I’ve never wanted to do so. This changed last Saturday during the family meeting when my 13 years old cousin showed me app (he had created) on his mobile phone. It was a simplified but still impressive version of Endomondo. At first, I was like WAT?! Am I that dumb or is my cousin a programming genius? After a short conversation, everything was clear to me: yup I’m dumb, but my little cousin hadn’t written a single line of code. He used Thunkable.

 

What is Thunkable?

Thunkable is a web platform which allows you to create mobile applications for Android and iOS without any programming knowledge. But if you think that simplicity, in this case, causes lack of capabilities for more advanced apps – you’re wrong! Without further ado, let’s see Tunkable in action.

The platform can be found at thunkable.com and it uses your Google account for registration and login. After choosing OS (Android, iOS) you can create a new app by clicking the button in the top-left corner. After choosing a name you should see user interface of an editor:

 

 

The editor has two available modes. The first one is Designer聽in which you can create/arrange each screen of your app. Adding components is very intuitive and it comes to drag and drop items from a left-side section called Pallete. What is worth mentioning is that items don’t necessarily have to be „visible” objects (like buttons or labels) but can be also „hardware” components like proximity sensor or pedometer. The central part of the designer presents an overview of a currently selected screen and allows you to select a specific item. The item can be then modified using right-site pannel called Properties, so you can adjust size, font, colors, position, visibility and many more. I’d say that for all of you who have ever done any WPF this should be very similar experience 馃槈 But now we got to the fun part.
How the heck do we program the behavior of each component if there’s no coding involved? Well, I need to apologize because I lied you (just a little) at the beginning of this article. We code but using… UI! The whole programming language is nothing more but set of visual blocks which need to be connected properly. Imho it’s very similar to Scratch… or it’s Scratch… I don’t know. Anyway, the whole coding process seems more like building from LEGO rather than „serious software engineering” but trust me that it’s still very interesting and sometimes challenging. Personally, I think that because it’s something completely different from our everyday work, it’s so awesome!
To start coding you need to switch editor’s view from designer” to blocks. You should see the following screen:

 

 

Once again the UI is very intuitive. From the left-side menu, you can select a block and drag it to the central workspace to create a program. All blocks are well categorized so you shouldn’t have any trouble with finding a specific one. What’s cool is that besides standard blocks that represent programming language features (loops, if-else, math operations etc.) you can also find plenty different blocks related to the specific component from UI. Here’s an example of a button’s blocks:

 


So, we know how to design the UI and how to add behavior to it. Let’s make an app!

 

Creating step tracker

Our application is going to be simple step tracker and it will consist of three screens:

  • Screen 1: A user enters a number of steps and press start button
  • Screen 2:聽The phone starts tracking steps using pedometer (not visible action). A number of steps left is presented on the screen. Additionally, after every 10 steps, a phone should inform a user about number of steps left via speakers.
  • Screen 3: When a user reaches his steps threshold, a phone should inform him about it via speakers and present some praise.

Let’s see how each screen is built in Thunkable.

 

Screen 1

The UI part is trivial because the only thing I did was drag and dropping three components: label for text, input, and a button for user’s submission. Let’s move to the blocks:

 

 

Simple is that! As you see, I used built-in event handler to open „Screen 2” when a button is pressed. Notice that I pass the value entered by a user. It will be used later to calculate number of steps left!

 

Screen 2

Once again UI part is very simple. However, notice that this time I also put two non-visible components listed in my „requirements specification”: pedometer and text-to-speech. Let’s move to blocks:

 

 

This time it’s more complicated but not too much. At the top, you can see that value passed from the previous screen (Screen 1) is assigned to the global variable called steps. It’s worth mentioning that it’s global to this screen, not the entire app. Inside next block, we have some pre-configuration. When this screen is initialized we want to start pedometer and set language of text-to-speech to English. Otherwise, this will be chosen automatically depending on our location. The third block contains the whole logic of the tracker. I used another event handler which gets fired every time pedometer detects a step. Notice that this block contains two built-in local variables: walkSteps and distance. Now let’s go through the flow:

  1. When a step is detected the number of steps left is calculated using a global variable (step) and local variable (walkSteps)
  2. A number is presented on the UI by assigning it to the label
  3. If number of steps left equals 0 then we navigate to the Screen 3
  4. If number of steps left is divisible by 10, text-to-speech is called to pass the information to the user.

 

Screen 3

At this point, understanding Screen 3 is going to be piece of cake for all of you:

 

 

 

Testing apps with Thunkable

We have an app. How do we test it on the device? USB cable? Some weird SDK? Nah, that would be boring. How about… QR code? That’s correct – Thunkable offers an awesome way of testing apps. It’s really simple:

  1. In web panel, go to the top menu -> Test -> Thunkable Live. The QR code should be presented.
  2. On your device, install Thunkable app and use it to scan QR code (make sure you’re in the same Wi-Fi network).
  3. That’s it! Seriously. The only thing you need to test your app is scanning QR code.

So, shall we see our step tracker in action? Here we go:

 

 

What’s cool is that this is truly „Live” experience. When your screen is changing on the phone, the same thing happens on the web panel. This helps you track the whole execution flow. After testing session, you can also easily export application as *.apk file using also QR code or by downloading it directly.

Summary

As I wrote at the beginning. I’m not an expert when it comes to mobile development. I don’t know whether „code behind” is good or not but frankly… I don’t care. I think this is a great way of creating PoC or simple applications for folks like me – noobs with no experience who don’t want to spend a whole weekend on learning Java, Kotlin, Swift or any other „mobile thing”.