A Thunkable Remix Tutorial

The United Nations gathers information regarding the development of the countries in the world, looking at three main factors: health, education, and income. The Human Development Index (HDI) is a measure of a country’s overall development. The HDI data can give people a better understanding of the world and lead to data-driven solutions to the biggest issues for humanity.

I explored building an app to visualize some of the HDI data on a map. The prototype below shows the GNI (gross national income) per capita for most of the countries in the world.

Click here to try the app– you’ll need a Thunkable account, and you’ll need to install Thunkable Live on your phone.

In this lesson, I walk you through the app and lead you through exercises to customize it and use more of the data that the UN reports provide. You can start with this sample and customize it however you’d like. Can you figure out a way to customize this app and help with one of UN’s Sustainable Development Goals?

Gather and Massage the Data

The UN’s HDI data is found here. I clicked on “Download Data” in the left menu and downloaded table 1 for the basic HDI data (there are many other interesting tables as well). The data is downloaded into a CSV file which I opened in Excel:

The spreadsheet has many blank rows and labels in the sheet. To use a sheet in a Thunkable app, it needs to be a Google Sheet or AirTable, and its best to eliminate unnecessary blank rows and labels. Ideally, row 1 should have the labels for each column, and the actual data should begin in the rows directly below.

So I imported the downloaded file into Google sheets and “massaged” it. I removed rows and columns that might confuse the app and that I didn’t need. The resulting Google Sheet is here and depicted below:

I knew I wanted to show data on a map, and I knew that the Thunkable Maps component only works with latitude and longitude coordinates. The HDI data didn’t provide location information for the countries in the HDI data, so I Google searched for “countries latitude” and found some data on Kaggle, a data visualization site, that maps countries to their [latitude, longitude] coordinates.

I downloaded that sheet and imported it into Google sheets to serve as my second data source. I massaged it as well to eliminate unneeded rows and columns. The resulting Google sheet is here and partially depicted below:

I could have manually added the latitude and longitude data from this sheet as new columns in my other sheet, but this seemed like a lot of work. So I chose to build my app with two sheets, one for HDI data and one for location data. This is common– you can “mix” data from various sources to visualize/calculate interesting information and relationships.

The App

The HDI Starter app is here. I created a new project in Thunkable and added a Label and a Map to the main screen. For the map, I set some properties to set the initial center of the map and zoom out to show the world at large:

Next, I added new data sources to represent my two Google sheets. A data source in Thunkable is used to represent a Google/Airtable spreadsheet. You add a new data source by scrolling down in the top-left-panel of the Designer, clicking (+) and following the instructions to choose a sheet. The image below shows the two data sources I loaded:

In the Blocks Editor, I wrote a function to retrieve the location information from the CountryLatLong sheet. With Thunkable, you bring in an entire column of a spreadsheet with the “list of values” block. My code blocks perform this three times to retrieve the spreadsheet’s latitudes, longitudes, and country names and put them in app variables:

The app has a function to get the latitude and longitude for a particular country, using the list variables from the function above:

The function calls “find first” to find the country specified in the parameter “aCountry”. If the country is found (return value placed into index is not -1), the function grabs the “indexth” latitude and longitude from the respective lists.

The function is used in the main event handler for the app, “when Screen1.Opens”, which is triggered when the app launches.

The blocks call the “prepareLatLongData” function to retrieve the location data, then loads in the HDI data into the variables HDICountryList and HDIIncomeList. It then loops through the HDI data and adds a map marker for each country, showing the Gross National Income, per capita, for each country.

The getLatAndLong function is called to get the location information for each country from the other sheet, and a “wait” is introduced so the markers will appear one-by-one as they’re created.

Remixing the App

Most app creation comes from remixing an existing app. Rarely do app developers begin a project with a blank slate.

In this section, I’ll walk you through some simple customizations of the HDI app. You’ll start with modifying it to show not just the average salary information, but the HDI index number for every country as well, which gives an overall measure of how developed the country is. 

As you work with the app and make simple customizations, you’ll become familiar with the code base. This knowledge will give you the confidence to make even more complex remixes, for “HDI apps” specifically and for spreadsheet-based apps in general.

Make a Copy of the Original App and Test it

Open the HDI Starter app and make a copy of it. You can make your own copy of any Thunkable app by choosing “Make Copy” in the top menu.

If the app connects with a spreadsheet, as the HDI app does, you have to perform some additional tasks to get your version to work. The issue is this: the spreadsheets are owned by the original app developers, and you probably don’t have access unless you know those developers and they agree to give you access.

So typically, you need to make your own copy of the spreadsheets along with the app. The following lists the steps to do so:

• Outside of Thunkable, make a copy of the spreadsheets that the app accesses. For the HDI sample, copy the two spreadsheets: HDIModified and CountryLatLong. You copy a Google sheet by choosing File | Make a Copy. You can name the copies as you like– in my sample I named them DavesHDIModified and DavesCountryLatLong, but you should name them using your own descriptive names.
• In your copy of the app within Thunkable, add your new sheets as data sources.  Begin by clicking the “+” near the Data Sources in the top-left panel of the Designer. Then choose “Create New”, “Google Sheets”, and “Select a Sheet” to select your new sheets. These will be the third and fourth data sources. Don’t (yet) delete the original data sources.

• In the Designer, fix any Data Viewer references so that they refer to the new data sources instead of the old ones. The HDI sample doesn’t have Data Viewer components, so you can skip this step.
• In the Blocks, fix the calls that access the data sources so that they refer to the new ones. Modify the blocks so that all references are to the new data sources (DavesHDIModified and DavesCountryLatLong in the example). For example, in the following example, the developer is choosing the new data source (DavesCountryLatLong) to replace the original one (CountryLatLong). 

After you select the new data source, the field selected (ID in the example of 

the top row) will be modified to a default. Reset it to what it was in the original (ID).

Make changes like the one above for all the rows of blocks in prepareLatLong and also for the blocks in the “when Screen.Opens” event handler.

• Re-Test the app to make sure it works as it did with the original data sources. If it doesn’t work, double check the block references to make sure the new data sources are being referred to along with the correct column names.
• Once the app works, you can remove the original data sources.

The process described above is the first step in remixing any Thunkable app with a spreadsheet– you now know how to do it! 

Customize by Showing HDI index

If you’ve successfully tested your version of the app, you’re now ready to actually make some modifications!

When you touch a marker, the original app shows the GNI, which is the Gross National Income for the country, per capita (the average salary for a person). The data source has some other columns, like the HDI Index, which aren’t used in the original app. For this remix example, we’ll expose this HDI Index information. 

When remixing an app, you can often use the existing code as a template for making changes. In the original app, variables were initialized to hold the desired columns retrieved from the spreadsheet. Variables were created to hold the country names (HDICountryList), and GNI (HDIIncomeList). Variables were also created to store individual items from each of those lists  (HDICountry HDIIncome).

Since the remix will include HDI Index information, you need to create variables to store the list of HDI indexes, and a variable for a single HDI Index, as shown in the blue rectangles below:

Next, modify the blocks in “when Screen.Opens” to 1) retrieve the HDI index column from the spreadsheet into the list variable, and 2) to show the HDI index in each map marker. The updated blocks should appear as:

The blue rectangles denote the modified code for the remix. 

Once you make these changes, you’re ready to re-test your version. The app should now display both HDI Income and Index information, as shown for Brazil in the screenshot below:

Remixing a World of Data

The sample HDI app uses a map to visualize the relative income and overall development of the countries in the world. A prospective donor might use it to find places in need. A teacher might use it to expose students to the incredible income disparities in our world.

But the sample is really meant as a launchpad. Just within the UN’s HDI data, you have incredible data at your fingertips– below are the tables you can download:

The real challenge is creativity: how can this data be used to help the world? How can the data be visualized to help people understand things? How about a monthly budget simulation app to help people empathize with the challenges faced by those in poor countries? Or an app that combines the raw HDI data with a list of non-profits in each country? You now have the fundamentals for designing experiences that can change the world!