How To Create A Step Tracker On Thunkable.com Without Programming

As we have a tendency to mentioned antecedently, i discussed on how to create a mobile app from web-site

i feel you've got observe the previous tutorial on the way to produce a mobile app from web site. I recommend you must browse before we have a tendency to begin this tutorial as a result of this text may be a continuation of the previous app tutorial.

In this post, i'll use a step tracker as the sample app that we would like to form on thunkable.com. Our application goes to be straightforward step tracker and it'll accommodates 3 screens:


Screen 1: A user enters variety of steps and press begin button
Screen 2: The phone starts following steps victimization measuring system (not visible action). variety of steps left is conferred on the screen. in addition, once each ten steps, a phone ought to inform a user regarding variety of steps left via speakers.
Screen 3: once a user reaches his steps threshold, a phone ought to inform him regarding it via speakers and gift some praise.


This will be noticeably intereting. Hmm..Let’s see however every screen is constructed in Thunkable

How To Create A step Tracker On Thunkable.com Without Programming
Screen 1




On the screen one, the UI half is trivial as a result of the sole factor I did was drag and dropping 3 components: label for text, input, and a button for user’s submission. Let’s dive to the blocks:




RECENT POST: the way to produce A Mobile App From web site
How To Monitize Mobile App

AdSense earning or admob earning-which is best for my on-line business


Quite straightforward as you see right?, if you've got detected, I used intrinsic event handler to open "Screen 2" once a button is ironed. then I pass the worth entered by a user. it'll be used later to calculate variety of steps left!

Screen 2




More over, UI half is extremely straightforward. However, notice that now I conjointly includes 2 non-visible parts listed in my "requirements specification”: measuring system and text-to-speech. Let’s dive to blocks:



This half can look a lot of sensitive however not an excessive amount of. At the top, you'll see that price passed from the previous screen (Screen 1) is appointed to the world variable known as steps.

It’s value mentioning that it’s world to the present screen, not the whole app. within next block, we've got some pre-configuration.

once this screen is initialized we would like to start out measuring system and set language of text-to-speech to English. Otherwise, this can be chosen mechanically looking on our location.

The third block contains the total logic of the huntsman. I used another event handler that gets laid-off each time measuring system detects a step.

Notice that this block contains 2 intrinsic native variables: walkSteps and distance. currently let’s bear the flow:

When a step is detected the quantity of steps left is calculated employing a world variable (step) and native variable (walkSteps)

A number is conferred on the UI by distribution it to the label
If variety of steps left equals zero then we have a tendency to navigate to the Screen three

If variety of steps left is dissociative by ten, text-to-speech is termed to pass the data to the user.


Screen 3










At now, understanding Screen three goes to be piece of cake for all of you:

After making the app you would like to check the app on Thunkable
Now that we've got associate degree app, however will we take a look at it on the device? USB cable? Some weird SDK? Nah, that will be boring.

however about… QR code? That’s correct – Thunkable offers associate degree awful approach of testing apps. It’s very simple:

Grab it below:

In net panel, attend the highest menu -> take a look at -> Thunkable Live. The QR code ought to be conferred.

On your device, install Thunkable app and use it to scan QR code (make certain you’re within the same Wi-Fi network).

That’s it! Seriously. the sole factor you would like to check your app is scanning QR code.

I hope this app tutorial on the way to produce a step tracker on thunkable.com while not committal to writing is helpful to you.

If you think that this post is value to share please hit social icons below to share

In my next article we might take at the way to avoid being banned from admob account.

Join our team and meet different developers on our chatbuk app